Learn

There are multiple variants of tab navigation on both Android and iOS. Apple recommends using a bottom tab bar in their Human Interface Guidelines. In Google’s Material Design, they mention a similar bottom tab bar. They also outline how you could implement a top tab bar. Although the bottom and top bar look identical, they work slightly differently. For example, the “active tab” indicator and transition between the tabs are different. All of these variants are available in react-navigation as different navigators.

We want to implement tabs that contain different primary functionality of our app. Because these screens are functionally unrelated, we need to implement the bottom tab variant. To give you a small reminder, these are the four tabs in the Codecademy Go app.

  • Feed - This is the primary tab users would see when they open the app. It includes a feed with the current course and some articles.
  • Catalog - In this tab, users can browse and start new courses.
  • Search - This tab is similar to catalog but allows users to search for content instead of just browsing.
  • Profile - This is the tab where users can see their account and progress so far.

Instructions

1.

In the previous exercise, we set up the basics for React Navigation and added a stack navigator. Let’s refactor this stack navigator to a tab navigator and add the Catalog screen.

Instead of using createStackNavigator, use the createBottomTabNavigator from the @react-navigation/bottom-tabs library. This method will also return an object with a Navigator and Screen component.

2.

Great! As you can see, we now have a bottom tab menu in our app. The stack and tab navigators handle multiple screens, but the tab navigator has a built-in and customizable menu. It’s important to pick the right navigator for the structure you want to have.

Right now, we only have a single screen. Add a new CatalogScreen component and add it as a screen to see how users would navigate.

3.

Awesome! When adding more screens, the bottom tab menu automatically adds a new tab for this screen. With this, users can already navigate through your app, and we are just getting started.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?