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.
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
Instead of using
createStackNavigator, use the
createBottomTabNavigator from the
@react-navigation/bottom-tabs library. This method will also return an object with a
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.
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.