React Navigation

In this section, we'll walk through adding react-navigation to an app.

The react-navigation documentation explains how to install the required dependencies, based on your React Native setup.

After that, we need to do 3 things:

• Set up a <NavigationContainer> from @react-navigation/native
• Create a navigator:
  • createStackNavigator from @react-navigation/stack
  • createBottomTabNavigator from @react-navigation/bottom-tabs
  • createDrawerNavigator from @react-navigation/drawer
• Define the screens in our app

I've included JavaScript and TypeScript versions of each example below - pick whichever you prefer.

1. Create a navigator

We first choose one of the available navigators, e.g. stack, which will act as our root navigator. Navigators may be nested later.

If we're using TypeScript, we need to define the types for all screens in the navigator.

2. Create screen components

Next, we create a component for each screen.

Screens are regular React components. They'll be passed navigation-specific props when instantiated.

3. Render it

Lastly, we render a NavigationContainer with our navigator within it.

Each Screen component defines a route in our app. If we want nested navigators, e.g. a tab navigator within a stack navigator, we can use another navigator as a screen's component.

We only need a single NavigationContainer, even if we have nested navigators.