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_directoryyour_reactNativeProjectpackage.json file.
D:your_directoryyour_reactNativeProjectandroidappbuild.gragle
D:your_directoryyour_reactNativeProjectandroidsettings.gradle file:
Make slightly change (replace ” with ‘/’) in above route structures as:
D:your_directoryyour_reactNativeProjectandroidappsrcmainjavacom reactNativeProjectMainApplication.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:
