Software Development: Top Tab Navigator With Icons in React Native

The Top Tab Navigator in React Native is one of the most common types of navigation that is used in mobile app development.

It is also used in React Native to indicate navigation flow and direction.

Since the Top Tab Navigator a top-based navigation, it is usually positioned at the top of your application and allows users to switch between different screens by clicking on the labels or icons.

Adding the Top Tab Navigator

To add the top tab navigator in React Native, we have to add both the dependency for React Navigation and createMaterialTopTabNavigator respectively.

Open the terminal/cmd prompt at the root of your React Native project and add the following code:

yarn add react-navigation
yarn add react-navigation-tabs
yarn add react-native-screens
yarn add react-native-gesture-handler
yarn add react-native-safe-area-view

Because we will need to add Icons also to the Top Tab Navigator, let us also add the dependency for icons in our mobile app development project:

yarn add react-native-vector-icons

Creating the Screens For the Top Tab Navigator in React Native

Before we go ahead to write the code for the Top Tab Navigator, we need to determine the number of screens we want to be available, and we need to create them as well.

For the purpose of this tutorial, we are going to have three (3) screens available:

HomeScreen,

ProfileScreen,

CartScreen.

And we are going to create them respectively

So create a file and call it HomeScreen.js and put the following contents:

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

class HomeScreen extends Component {
render(){
return(
<View>
<Text>Welcome Home</Text>
</View>
)
}
}

export default HomeScreen;

Next, we will create one for the AboutScreen as follows:

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

class AboutScreen extends Component {
render(){
return(
<View>
<Text>About us</Text>
</View>
)
}
}

export default AboutScreen;

And finally for the screens we create the content for our ContactScreen as follows:

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

class ContactScreen extends Component {
render(){
return(
<View>
<Text>Contact us</Text>
</View>
)
}
}

export default ContactScreen;

Next, we write the code for the Top Tab Navigation. Let’s call the screen TopTab.js and add the following code:

import React, {Component} from 'react';

import {View} from 'react-native';

import {createAppContainer} from 'react-navigation';

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

import HomeScreen from './HomeScreen';

import ProfileScreen from './ProfileScreen';

import CartScreen from './CartScreen';

 

class TopTab extends Component {

  render() {

    return (

      <View style={{flex: 1}}>

        <View style={{flex: 1}}>

          <TopTabContainer />

        </View>

      </View>

    );

  }

}


const AppNavigator = createMaterialTopTabNavigator(

  {

    HomeScreen: HomeScreen,

    Profile: ProfileScreen,

    Cart: CartScreen,

  },

  {

    tabBarOptions: {

      activeTintColor: 'white',

      showIcon: true,

      showLabel: true,

      style: {

        backgroundColor: '#212121',

      },

    },

  },

);

const TopTabContainer = createAppContainer(AppNavigator);

export default TopTab;

Top Tab Navigator

One more thing …

Let us add the icons to the labels. To do that we will have to use navigatorOptions as follows

import React, {Component} from 'react';

import {View} from 'react-native';

import {createAppContainer} from 'react-navigation';

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

import Icon from 'react-native-vector-icons/FontAwesome';

import HomeScreen from './HomeScreen';

import ProfileScreen from './ProfileScreen';

import CartScreen from './CartScreen';

Icon.loadFont():

 

class TopTab extends Component {

  render() {

    return (

      <View style={{flex: 1}}>

        <View style={{flex: 1}}>

          <TopTabContainer />

        </View>

      </View>

    );

  }

}


const AppNavigator = createMaterialTopTabNavigator(

  {

    HomeScreen: {
    screen: HomeScreen,
    navigationOptions: {
     tabBarIcon: ({tintColor}) => (
          <Icon
            name={'home'}
            size={24}
            color={'#fff'}
          />
        ),
     }
     },

    Profile: {
    screen: Profile,
    navigationOptions: {
     tabBarIcon: ({tintColor}) => (
          <Icon
            name={'user'}
            size={24}
            color={'#fff'}
          />
        ),
     }
     },

    Cart: {
    screen: Cart,
    navigationOptions: {
     tabBarIcon: ({tintColor}) => (
          <Icon
            name={'envelope'}
            size={24}
            color={'#fff'}
          />
        ),
     }
     },


  },

  {

    tabBarOptions: {

      activeTintColor: 'white',

      showIcon: true,

      showLabel: true,

      style: {

        backgroundColor: '#212121',

      },

    },

  },

);

const TopTabContainer = createAppContainer(AppNavigator);

export default TopTab;