Add Bottom Tabs to a React Native App with React Navigation

Share this video with your friends

Published 6 years ago

Updated 4 years ago

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.

View code on GitHub

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.

とうせいきょう

~ 5 years ago

For react-navigation v3, App.js should be

import React, { Component } from 'react';
import {
  createStackNavigator,
  createAppContainer,
  createBottomTabNavigator
} from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome'

import RestaurantList from 'components/RestaurantList';
import RestaurantInfo from 'components/RestaurantInfo';
import About from 'components/About';

const List = createStackNavigator({
  Home: { screen: RestaurantList },
  Info: { screen: RestaurantInfo }
}, {
  defaultNavigationOptions: {
    headerStyle: {
      backgroundColor: '#0066cc',
      color: '#fff'
    },
    headerTintColor: '#fff',
    headerTitleStyle: { color: '#fff' }
  }
});

const TabNavigator = createBottomTabNavigator({
  List: { screen: List },
  About: { screen: About }
}, {
  defaultNavigationOptions: ({ navigation }) => {
    return {
      tabBarIcon: ({ tintColor }) => {
        const route = navigation.state.routeName;
        console.log('route', route);
        const name = {
          'List': 'list',
          'About': 'info-circle'
        }[route]
        return <Icon name={name} color={tintColor} size={22} />
      },
      tabBarOptions: {
        activeBackgroundColor: '#E6F0FA'
      }
    }
  }
});

export default createAppContainer(TabNavigator);

Karstacian

~ 5 years ago

Thanks とうせいきょう

emekafredy

~ 5 years ago

Thanks とうせいきょう

Jayakrishnan JR

~ 5 years ago

The ** createBottomTabNavigator ** is moved to another package. Install it with yarn add react-navigation-tabs Then update the js file

import {createBottomTabNavigator} from 'react-navigation-tabs';

Then if you are getting an error null of something then cd ios pod install And restart the project again

Markdown supported.

Become a member to join the discussionEnroll Today

Build a React Native Application for iOS and Android from Start to Finish

Add Bottom Tabs to a React Native App with React Navigation

Social Share Links