Bottom tab navigator also known as createBottomTabNavigator() in react native creates bottom tab navigation. The Bottom Tab Navigation Navigator creates the tabs navigation at the bottom of screen. Each tab can contain multiple activities screen inside them with proper navigation. Today we would learn about react navigation’s latest 3.x.x version createBottomTabNavigator bottom tab navigation with custom Tab Icons in Android & iOS React naive app. So each tab will show its own tab icon with optimal settings. So let’s get started 🙂 .
Note: We are using the individual activity JS file structure in current project so there are 5 different .JS files in our project. See the below file structure to understand.
Create Bottom Tab Navigation Navigator in React Native with Tab Icon Android iOS App:
1. Before getting started with coding we need to first install the 2 libraries in our current react native project. So open your react native project folder in Command Prompt or Terminal and execute below command to install React Navigation latest library.
|
1 |
npm install --save react-navigation |
Screenshot after successfully installed React Navigation library:
2. Install the React Native Gesture Handler library using below command. We need to install this library to properly work with react navigation.
|
1 |
npm install --save react-native-gesture-handler |
Screenshot:
3. After done installing libraries we need to execute the react-native link command to index the gesture handler library in our current react native project.
3. Create a folder named as assets in your react native project.
4. Download the Home Icon and Settings Icon from below and paste into assets folder. There are 2 bottom navigation tab present in our tutorial.
5. Create another folder named as screens in your react native project. We would use this folder to manage individual Activity screen .js file.
6. Open your project’s App.js file and import createStackNavigator, createBottomTabNavigator, createAppContainer and Image component.
|
1 2 3 4 5 |
import React, {Component} from 'react'; import { Image } from 'react-native'; import { createStackNavigator, createBottomTabNavigator, createAppContainer, } from 'react-navigation'; |
7. Import 4 Different activity screens from screens folder. We would create these classes below.
|
1 2 3 4 |
import Home_Activity from './screens/Home_Activity'; import Settings_Activity from './screens/Settings_Activity'; import Details_Activity from './screens/Details_Activity'; import Profile_Activity from './screens/Profile_Activity'; |
8. Create 2 constant named as HomeTab and SettingsTab using createStackNavigator with 2 and 3 Activities in App.js file. We would pass 2 and 3 activities in each tab. So above HomeTab contains 2 activitie screens and SettingsTab contain 3 activities inside them.
- backgroundColor : Used to set Action title bar background color.
- headerTintColor : Used to set header inside title text color.
- title : Used to set title text of each TAB.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
const HomeTab = createStackNavigator( { Home: Home_Activity , Details: Details_Activity , }, { defaultNavigationOptions: { headerStyle: { backgroundColor: '#0091EA', }, headerTintColor: '#fff', title: 'Home Tab', }, } ); const SettingsTab = createStackNavigator( { Settings: Settings_Activity , Details: Details_Activity , Profile: Profile_Activity , }, { defaultNavigationOptions: { headerStyle: { backgroundColor: '#0091EA', }, headerTintColor: '#FFFFFF', title: 'Settings Tab', }, } ); |
9. Creating a constant named as MainApp using createBottomTabNavigator and pass above created both HomeTab & SettingsTab init in App.js file.
- activeTintColor : Used to set the active tab tint color.
- inactiveTintColor : Used to set the inactive tint color of bottom tab.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
const MainApp = createBottomTabNavigator( { Home: HomeTab , Settings: SettingsTab , }, { defaultNavigationOptions: ({ navigation }) => ({ tabBarIcon: ({ focused, horizontal, tintColor }) => { const { routeName } = navigation.state; if (routeName === 'Home') { return ( <Image source={ require('./assets/home.png') } style={{ width: 20, height: 20, }} /> ); } else { return ( <Image source={ require('./assets/settings.png') } style={{ width: 20, height: 20 }} /> ); } }, }), tabBarOptions: { activeTintColor: '#FF6F00', inactiveTintColor: '#263238', }, } ); |
10. Finally call the MainApp constant using createAppContainer with export default.
|
1 |
export default createAppContainer(MainApp); |
11. Complete source code for App.js file class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
import React, {Component} from 'react'; import { Image } from 'react-native'; import { createStackNavigator, createBottomTabNavigator, createAppContainer, } from 'react-navigation'; import Home_Activity from './screens/Home_Activity'; import Settings_Activity from './screens/Settings_Activity'; import Details_Activity from './screens/Details_Activity'; import Profile_Activity from './screens/Profile_Activity'; const HomeTab = createStackNavigator( { Home: Home_Activity , Details: Details_Activity , }, { defaultNavigationOptions: { headerStyle: { backgroundColor: '#0091EA', }, headerTintColor: '#fff', title: 'Home Tab', }, } ); const SettingsTab = createStackNavigator( { Settings: Settings_Activity , Details: Details_Activity , Profile: Profile_Activity , }, { defaultNavigationOptions: { headerStyle: { backgroundColor: '#0091EA', }, headerTintColor: '#FFFFFF', title: 'Settings Tab', }, } ); const MainApp = createBottomTabNavigator( { Home: HomeTab , Settings: SettingsTab , }, { defaultNavigationOptions: ({ navigation }) => ({ tabBarIcon: ({ focused, horizontal, tintColor }) => { const { routeName } = navigation.state; if (routeName === 'Home') { return ( <Image source={ require('./assets/home.png') } style={{ width: 20, height: 20, }} /> ); } else { return ( <Image source={ require('./assets/settings.png') } style={{ width: 20, height: 20 }} /> ); } }, }), tabBarOptions: { activeTintColor: '#FF6F00', inactiveTintColor: '#263238', }, } ); export default createAppContainer(MainApp); |
11. Complete source code for Home_Activity file class present in screens folder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
import React, { Component } from 'react'; import { Text, View, TouchableOpacity, StyleSheet } from 'react-native'; export default class Home_Activity extends Component { static navigationOptions = { title: 'Profile Activity', }; render() { return ( <View style={styles.MainContainer}> <Text style={{ marginTop: 40, fontSize: 20 }}>App Home Screen</Text> <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <TouchableOpacity style={styles.button} onPress={() => this.props.navigation.navigate('Settings')}> <Text style={styles.text}>Go to settngs Tab</Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={() => this.props.navigation.navigate('Details')}> <Text style={styles.text}>Goto Details Screen</Text> </TouchableOpacity> </View> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5fcff', padding: 11 }, button: { alignItems: 'center', backgroundColor: '#43A047', padding: 12, width: 280, marginTop: 12, }, text: { color: '#fff' } }); |
12. Complete source code for Settings_Activity file class present in screens folder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
import React, { Component } from 'react'; import { View, StyleSheet, Text, TouchableOpacity } from 'react-native'; export default class Settings_Activity extends Component { static navigationOptions = { title: 'Settings Activity', }; render() { return ( <View style={styles.MainContainer}> <Text style={{ marginTop: 40, fontSize: 20 }}>Settings Activity Screen</Text> <TouchableOpacity style={styles.button} onPress={() => this.props.navigation.navigate('Home')}> <Text style={styles.text}>Go to Home Tab</Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={() => this.props.navigation.navigate('Details')}> <Text style={styles.text}>Goto Detail Screen</Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={() => this.props.navigation.navigate('Profile')}> <Text style={styles.text}>Goto Profile Screen</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5fcff', padding: 11 }, button: { alignItems: 'center', backgroundColor: '#43A047', padding: 12, width: 280, marginTop: 12, }, text: { color: '#fff' } }); |
13. Complete source code for Details_Activity file class present in screens folder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import React, {Component} from 'react'; import { View, Text } from 'react-native'; export default class Details_Activity extends Component { static navigationOptions = { title: 'Details Activity', }; render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Details Activity Screen</Text> </View> ); } } |
14. Complete source code for Profile_Activity file class present in screens folder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import React, {Component} from 'react'; import { View, Text} from 'react-native'; export default class Profile_Activity extends Component { static navigationOptions = { title: 'Profile Activity', }; render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Profile Activity Screen</Text> </View> ); } } |
Screenshots:
Also Read :
Call External Local JS File Activity in Current App.js File in React Native
React Native Screen Navigation using Animated Transition React Navigation
React Native Detect Device is Android or iOS Load Different Component
React Native Create ViewPager with Tab Title Dot Indicators iOS Android
React Native Swipeable Tab Navigation View Android iOS Tutorial
How to pass data from Home to settings??
Logesh read my this tutorial this would help you : https://reactnativecode.com/pass-textinput-entered-value-activity-screen/ .
How to change TabBarIcon Color???
Vignesh you need to use the Style prop in tabBarOptions for example :
tabBarOptions: {
activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},
style: {
backgroundColor: 'blue',
},
}
Cannot read property ‘Direction’ of undefined
Module AppRegistry is not a registered callable module (calling runApplication)
Love Panchal the code is working fine .
Thank you
Welcome 🙂 .
Thank you it works fine !!!
Do you know if it’s possible to insert a translation code ? I use i18n to translate the app and I have no idea how to insert my code in the tabbar (my code looks like this ; {i18n.t(“world”)})
Thanks