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.

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.