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.

Leave a Reply

%d bloggers like this: