React Native Adding Icons at the Bottom of Tab Navigation

In this section, we will add the icons to the bottom of Tab Navigation. Before dive in this tutorial, go through the previous tutorial Tab Navigation, where we describe how to implement Bottom Tab Navigation.

Example to Add Icons at the Bottom of Tab Navigation

First add the required library and dependency to the React Native project:

1. Add the react navigation library by using the following command:

2. Add the react native gesture handler library by using the following command:

3. Add the react native vector icons library by using the following command:

After the successful execution of above command, link these libraries to react native project using the bellow command:

The above command adds the below dependencies in D:\your_directory\your_reactNativeProject\package.json file.

D:\your_directory\your_reactNativeProject\android\app\build.gragle

D:\your_directory\your_reactNativeProject\android\settings.gradle file:

Make slightly change (replace '\' with '/') in above route structures as:

D:\your_directory\your_reactNativeProject\android\app\src\main\java\com\ reactNativeProject\MainApplication.java

App.js

Create two classes "HomeScreen" and "ProfileScreen" for two tab "Home" and "Profile" respectively. The createBottomTabNavigator function creates a tab bar on the bottom of the screen which provides you to switch between different routes.

Map the "HomeScreen" to "Home" and "ProfileScreen" to "Profile" title. The Icon tag adds the icon to tabs navigation. We can use the different icon name from ionicons.com

Output: