In this section, we'll walk through adding
react-navigation to an app.
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
- Create a navigator:
- Define the screens in our app
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.
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
We only need a single
NavigationContainer, even if we have nested navigators.
Want to learn React Native in-depth?