React Native Adding Icons at the Bottom of Tab Navigation
n 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.
"react-native-vector-icons": "^6.3.0",
"react-navigation": "^3.3.2"
D:\your_directory\your_reactNativeProject\android\app\build.gragle
implementation project(':react-native-gesture-handler')
D:\your_directory\your_reactNativeProject\android\settings.gradle file:
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-vector-icons\android')
include ':react-native-gesture-handler'
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:
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-gesture-handler'
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
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
. . .
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new VectorIconsPackage(),
new RNGestureHandlerPackage()
);
}
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
import {StyleSheet, Text, View} from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
class HomeScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Home Screen</Text>
</View>
);
}
}
class ProfileScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Profile Screen</Text>
</View>
);
}
}
const TabNavigator = createBottomTabNavigator(
{
Home:{
screen:HomeScreen,
navigationOptions:{
tabBarLabel:'Home',
tabBarIcon:({tintColor})=>(
<Icon name="ios-home" color={tintColor} size={25}/>
)
}
},
Profile: {
screen:ProfileScreen,
navigationOptions:{
tabBarLabel:'Profile',
tabBarIcon:({tintColor})=>(
<Icon name="ios-person" color={tintColor} size={25}/>
)
}
},
},
{
initialRouteName: "Home"
},
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
});
export default createAppContainer(TabNavigator);
Output:
