Add Bottom Tabs to a React Native App with React Navigation v6

Share this video with your friends

Send Tweet

Install React Navigation v6 and use the Bottom Tabs navigator to add two tabs to the app: the Home tab and the Bookmarks tab.

To do this, we'll wrap our app in a NavigationContainer component and set up the two tabs in that tab navigator. In the process, we'll convert our Stories component to be the Home page of our app.

Resources:

  • React Navigation: https://reactnavigation.org/
  • Bottom Tabs Navigator: https://reactnavigation.org/docs/bottom-tab-navigator/

Expo:

  • If installing on an Expo managed project, install the dependencies with expo install react-native-screens react-native-safe-area-context - read more

** Android:**

  • If using plain React Native without Expo need to add some native code before rebuilding the app as described here
  • Then rebuild the app with yarn android

Checkpoint: Add a bottom tabs navigator