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

Instructor: [0:00] In order to add navigation to our app, let's go to reactnavigation.org. Let's choose the documentation for version 6. In the Getting Started section, you'll be able to follow the installation instructions for the platform you're using Expo, non-Expo, iOS, Android, npm, or Yarn.

[0:19] Copy the installation command and paste it into your terminal. We will also need to separately install react-native-screens and react-native-safe-area-context. Before installing the native dependencies, let's go to Guides and Tab Navigation, and let's also install the Bottom Tabs Navigator. We'll copy that and paste it into our terminal.

[0:45] For iOS, we will cd into the iOS directory and run pod install. This will install the NATO dependencies. We'll go back to the root directory and rebuild the app. In our app.tsx, let's import a navigation container from React Navigation Native.

[1:05] We'll need to wrap our whole app inside the navigation container. Make sure you put this inside the Urql provider. Now anything inside this navigation container can use the navigation context, and anything inside this Urql provider will be able to use the GraphQL context.

[1:23] In your source directory, create a new folder and call it screens. In the screens folder, let's create a new file called BottomTabs.navigator.tsx. In the bottom tabs navigator, import star as react from React, and create bottom tab navigator from React navigation.

[1:47] We'll do a const bottom tabs = create bottom tab navigator. Let's export const bottom tab navigator. This will be a function of React component and an error function. Let's return. We'll use this bottom tabs, so bottom tabs dot.

[2:10] We can see that we can have a group, a navigator, or a screen. We'll do BottomTabs.navigator. Inside here, we can do BottomTabs.screen. We'll give it a name of home and a component of stories. In our app.tsx, instead of returning stories here, let's return the bottom tab navigator.

[2:37] Now we get a tab navigator with just one tab, which is the home screen and our list of stories is displayed inside it. Let's rename stories to home.screen.

[2:50] I'm going to automatically update the imports. In our new home.screen.tsx, let's rename the export to home screen. In the bottom tabs navigator, we'll need to update the name of the export to home screen. We want to move home screen into our screen's directory.

[3:12] Because React navigation ensures that our app doesn't overflow outside of the safe area on a device, we can go to our home screen. If we scroll down to syles, we can remove the temporary style. Just to give this a little bit of padding, let's convert this padding bottom to a padding vertical.

[3:33] In our screen's directory, let's add a new file and call it bookmarks.screen.tsx. In this file, let's import star as react from React, and also import view, text, and style sheet from React Native. We'll want to export const bookmarks screen.

[3:54] This is a functional React component, and returning an error function with a view, some text saying bookmarks. Let's also add a style object at the bottom. Styles = stylesheet create. We'll do a container with justify content center and align items center.

[4:19] On our view, let's do style = styles.container. Open bottom tabs navigator again, and import the bookmark screen. In our bottom tab screen, let's add another screen. We'll call it bookmarks, and we'll pass in the bookmarks screen. After saving, we'll see two tabs at the bottom.

[4:42] Let's open the bookmarks screen again. In our container styles, let's also add a flex one, which will allow this text in the view to be centered. In the bottom tabs navigator, we can add as many tabs as we want as long as the names are unique.

[4:59] React navigation will automatically position them in our app. In our case, we only need the two tabs.