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:

1. 
   yarn add react-navigation  

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

1. yarn add react-native-gesture-handler  

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

1. yarn add react-native-vector-icons  

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

1. react-native link  

The above command adds the below dependencies 

in D:\your_directory\your_reactNativeProject\package.json file.

1. "react-native-gesture-handler": "^1.1.0",  
2. "react-native-vector-icons": "^6.3.0",  
3. "react-navigation": "^3.3.2"  

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

1. implementation project(':react-native-vector-icons')  
2. implementation project(':react-native-gesture-handler')  

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

1. include ':react-native-vector-icons'  
2. project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-vector-icons\android')  
3. include ':react-native-gesture-handler'  
4. project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-gesture-handler\android')  

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

1. include ':react-native-vector-icons'  
2. project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')  
3. include ':react-native-gesture-handler'  
4. project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')  

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

1. import com.oblador.vectoricons.VectorIconsPackage;  
2. import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;  
3. . . .  
4. protected List<ReactPackage> getPackages() {  
5.   return Arrays.<ReactPackage>asList(  
6.       new MainReactPackage(),  
7.         new VectorIconsPackage(),  
8.         new RNGestureHandlerPackage()  
9.   );  
10. }  

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

1. import React from 'react';  
2. import {StyleSheet, Text, View} from 'react-native';  
3. import { createBottomTabNavigator, createAppContainer } from 'react-navigation';  
4. import Icon from 'react-native-vector-icons/Ionicons';  
5. class HomeScreen extends React.Component {  
6.   render() {  
7.     return (  
8.         <View style={styles.container}>  
9.           <Text>Home Screen</Text>  
10.         </View>  
11.     );  
12.   }  
13. }  
14. class ProfileScreen extends React.Component {  
15.   render() {  
16.     return (  
17.         <View style={styles.container}>  
18.           <Text>Profile Screen</Text>  
19.         </View>  
20.     );  
21.   }  
22. }  
23.   
24. const TabNavigator = createBottomTabNavigator(  
25.     {  
26.       Home:{  
27.         screen:HomeScreen,  
28.         navigationOptions:{  
29.           tabBarLabel:'Home',  
30.           tabBarIcon:({tintColor})=>(  
31.               <Icon name="ios-home" color={tintColor} size={25}/>  
32.           )  
33.         }  
34.       },  
35.       Profile: {  
36.         screen:ProfileScreen,  
37.         navigationOptions:{  
38.           tabBarLabel:'Profile',  
39.           tabBarIcon:({tintColor})=>(  
40.               <Icon name="ios-person" color={tintColor} size={25}/>  
41.           )  
42.         }  
43.       },  
44.     },  
45.     {  
46.       initialRouteName: "Home"  
47.     },  
48. );  
49. const styles = StyleSheet.create({  
50.   container: {  
51.     flex: 1,  
52.     justifyContent: 'center',  
53.     alignItems: 'center'  
54.   },  
55. });  
56.   
57. export default createAppContainer(TabNavigator);  

Output: