NavigationContainer

import { NavigationContainer } from '@uhg-abyss/mobile';

The container takes care of platform specific integration and provides various useful functionality:

Deep link integration with the linking prop.
Notify state changes for screen tracking, state persistence etc.
Handle system back button on Android by using the BackHandler API from React Native.

Usage

import { NavigationContainer, createStackNavigator } from '@uhg-abyss/mobile';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>{/* ... */}</Stack.Navigator>
    </NavigationContainer>
  );
}

Initial State

The initialState prop accepts initial state for the navigator. This can be useful for cases such as deep linking, state persistence etc.

Example:

<NavigationContainer initialState={initialState}>
  {/* ... */}
</NavigationContainer>

Providing a custom initial state object will override the initial state object obtained via linking configuration or from browser's URL. If you're providing an initial state object, make sure that you don't pass it on web and that there's no deep link to handle.

State Change

The onStateChange prop accepts a function that gets called every time navigation state changes. It receives the new navigation state as the argument.

You can use it to track the focused screen, persist the navigation state etc.

Example:

<NavigationContainer
  onStateChange={(state) => console.log('New state is', state)}
>
  {/* ... */}
</NavigationContainer>

onReady

The onReady prop accepts a function which is called after the navigation container and all its children finish mounting for the first time. You can use it for:

Making sure that the ref is usable. See docs regarding initialization of the ref for more details. Hiding your native splash screen

Example:

<NavigationContainer
  onReady={() => console.log('Navigation container is ready')}
>
  {/* ... */}
</NavigationContainer>

onUnhandledAction

The onUnhandledAction prop accepts a function which is called when a navigation action is not handled by any of the navigators.

By default, a development-only error message will be shown when an action was not handled. You can override the default behavior by providing a custom function.

Linking

The linking props handles configuration for linking integration used for deep linking, URL support in browsers etc.

Example:

import { NavigationContainer } from '@uhg-abyss/mobile';

function App() {
  const linking = {
    prefixes: ['https://mychat.com', 'mychat://'],
    config: {
      screens: {
        Home: 'feed/:sort',
      },
    },
  };

  return (
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      {/* content */}
    </NavigationContainer>
  );
}

Fallback

The fallback prop is a React Element to use as a fallback while we resolve deep links. Defaults to null.

If you have a native splash screen, please use onReady instead of fallback prop.

Example:

<NavigationContainer fallback={<Text>Loading...</Text>}>
  {/* content */}
</NavigationContainer>

Independent

Use the independent prop when the navigation container should be independent of parent containers. If this is not set to true, this container cannot be nested inside another container. Setting it to true disconnects any children navigators from parent container.

You probably don't want to set this to true in a typical React Native app. This is only useful if you have navigation trees that work like their own mini-apps and don't need to navigate to the screens outside of them.