How to Add Bottom Tab Navigator in React Native

If there were no libraries such as react-navigation, navigation in react native would have been an uphill task. In this blog post, you can learn how to create a bottom tab navigator in your react native project.

First of all, add react-navigation in your project with command npm install –save react-navigation . After that add react native gesture handler to your app using command npm install –save react-native-gesture-handler@~1.0.14 and link it to your project using react-native link react-native-gesture-handler

For Android, change MainActivity.java file as given below:

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
//Add the following imports
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

//Add the following Overrides too
@Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
      return new RNGestureHandlerEnabledRootView(MainActivity.this);      }
    };
 }
}

Still have confusions? You can go through official docs of react-navigation library here

For having better structuring, I created a folder named src. And create two folders named images and screens inside src folder. I added three icons inside images folder. Inside screens folder, I have created three screens named Home.js, Profile.js and Settings.js.

Home.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class Home extends Component {
  
  render() {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <Text> This is Home </Text>
      </View>
    );
  }
}

Profile.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class Home extends Component {
  
  render() {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <Text> This is Home </Text>
      </View>
    );
  }
}

Settings.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class Settings extends Component {
  
  render() {
    return (
        <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <Text> This is Settings </Text>
      </View>
    );
  }
}

Now open App.js and replace the existing code with following code.

App.js

import React from 'react';
import { Image } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import HomeScreen from './src/screens/Home';
import ProfileScreen from './src/screens/Profile';
import SettingsScreen from './src/screens/Settings';
import HomeIcon from './src/images/home.png';
import ProfileIcon from './src/images/profile.png';
import SettingsIcon from './src/images/settings.png'; 

const TabNavigator = createBottomTabNavigator({
  // Your Screens
  Home: HomeScreen,
  Profile: ProfileScreen,
  Settings: SettingsScreen,
},
// Tab icons and configurations
{
  defaultNavigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ tintColor }) => {
      const { routeName } = navigation.state;
      tintColor= 'blue';
      let iconName;
      switch (routeName) {
        case 'Home':
          iconName = HomeIcon;
          break;
          case 'Profile':
          iconName = ProfileIcon;
          break;
          case 'Settings':
          iconName = SettingsIcon;
          break;
        default:
          break;
      }
      
      // You can return any component that you like here!
      return <Image source={iconName} style={{height: 25, width: 25}} tintColor={tintColor} />;
    },
  }),
  tabBarOptions: {
    activeTintColor: 'red',
    inactiveTintColor: 'gray',
  },
}

);
export default createAppContainer(TabNavigator);

That’s it. Now you can see the bottom tab navigation in your app as given in the following gif file. For the source code, you can get it from this GitHub repo.