Add Bottom Tabs to a React Native App with React Navigation
Tabs are another popular navigation paradigm on mobile, so we’ll add tabs to the bottom of the screen, which will make it easy to switch between the primary screens of our application.
Instructor: [00:00] Let's open app.js and make some tabs on the bottom of the screen. We can import createBottomTabNavigator from react-navigation and make some tab by calling it. Then, we have to make a decision.
[00:17] When we press the info button or any stack navigation push, do we want the new screens to come up over the tabs, or do we want our bottom tabs to always be on the bottom of the screen? Whatever we want is the root or base navigator will be the one we want to export.
[00:33] Let's switch the tabs to be the default export from app. Then, we can name our stack navigator, and make that stack navigator as the first tab in the bottom tabs. When we run that, we get a bottom tab that's says list.
[00:54] When we press the info button, you can see the stack navigator push the screen, but the tab is still visible, because the tab navigator is what contains the stack navigator. Let's add a new about screen which will make this more clear.
[01:09] I'll make the new about.js file index body component with the header, an icon, and some dummy text, and some styles, so looks OK. Then, we can import that into app.js and set that as a second tab called about. We can run that to see there's two tabs now.
[01:39] If we press the info button now, the stack navigator pushes on to the lists tab. We can still select the about tab which shows us the about screen. If we go back to the list tab, we see the list tab is still on the same info screen.
[01:55] The tab looks pretty bad here, so let's import the Font Awesome icons in app.js. Just like for stack navigator, we can specify navigation options for the tab bar. We want different icons for each tab, so we'll specify a function for the navigation options, which has the navigation object as a param.
[02:17] We can set the tab bar icon key on that object which is a function itself that will give us the tint color to use for each icon. Then, we can extract the route name from the navigation object and use that to set the proper icon for the proper tab.
[02:38] If we reload now, each tab has an icon and that icon changes color based on which tab is active. If we add some tab bar options to the navigation options with the tab, then we can add more distinction to the currently selected tab by specifying an active background color, which changes the background color of the selected tab.