React Navigation Tab Navigator With Icons

In the tutorial, we are using React Navigation 4.x. We are going to add a simple tab bar at the bottom of the screen. We only required the single package to implement the tab navigator in the previous version.

Bottom Tab Navigator

Install react-navigation-tabs

First, we have to install the react-navigation-tabs to implement the tab navigator. If you are using the React Navigation 3.x, then you don’t require this package.

npm install react-navigation-tabs

Next step is to start implementing the codes. We required the icons package to add icons with the tab bar. I am using the expo to develop this view. And for icons I am using the @expo/vector-icons.

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

Next step is to create screens that will reflect with the tab bar touch event. Let’s create 3 screens i.e. Home Screen, Settings Screen and Signout Screen. The Signout screen basically handles the signout event.

const HomeScreen = () => {
    return (
        <View style={style.container}>
            <Text>Home Screen</Text>
        </View>
    );
}
  
const SettingScreen = () => {
    return (
        <View style={style.container}>
            <Text>Settings Screen</Text>
        </View>
    );
}

const SignoutScreen = () => {}

const style = StyleSheet.create({
    container: {
        flex: 1, 
        justifyContent: 'center', 
        alignItems: 'center'
    }
});

Next step is creating the Tab Navigator. Let’s start with a very basic tab bar. This tab bar doesn’t contain the icons.

const TabNavigator = createBottomTabNavigator({
    Home: HomeScreen,
    Settings: SettingScreen,
    Signout: SignoutScreen
});

export default createAppContainer(TabNavigator);

Now if you compile your app and check the bottom tab navigator, it doesn’t look cool without icons. So let’s add icons in the tab navigator. We need to define the navigationOptions object to every screen to include the icons.

const TabNavigator = createBottomTabNavigator({
    Home: {
        screen: HomeScreen, 
        navigationOptions: {
            tabBarLabel: 'Home', 
            tabBarIcon: ({ tintColor }) => (
                <Ionicons name="ios-home" color={tintColor} size={25} />
            )
        }
    }, 
    Settings: {
        screen: SettingScreen, 
        navigationOptions: {
            tabBarLabel: 'Settings', 
            tabBarIcon: ({ tintColor }) => (
                <Ionicons name="ios-settings" color={tintColor} size={25} />
            )
        }
    }, 
    Signout: {
        screen: SignoutScreen, 
        navigationOptions: {
            tabBarLabel: 'Signout', 
            tabBarIcon: ({ tintColor }) => (
                <SimpleLineIcons name="logout" color={tintColor} size={20} />
            )
        }
    }
});

This is how we added the icons to the bottom tab navigator. You can change the default active tint color and in-active tint color by adding the tabBarOptions object. We have to implement this object in the second argument on the createBottomTabNavigator.

const TabNavigator = createBottomTabNavigator({
    Home: {
        ....
    }, 
    Settings: {
        ....
    }, 
    Signout: {
        ....
    }
}, {
    tabBarOptions: {
        activeTintColor: 'red', 
        inactiveTintColor: 'grey'
    }
});

If in case you don’t get the icons at the bottom tab navigator, then make sure the showIcon property should have the boolean true value in the tabBarOptions.

tabBarOptions: {
    activeTintColor: 'red', 
    inactiveTintColor: 'grey', 
    showIcon: true
}

Post navigation