React Native Top Tab Navigator (createMaterialTopTabNavigator)

The material style createMaterialTopTabNavigator is used to create tab navigator on the top of the screen. It provides functionality to create and display multiple screens routers. These screens are switches between each other by tapping route or swiping horizontally. The tab screen components are mounted when they are focused.

The createMaterialTopTabNavigator function of react-navigation library facilitates us to implement top tab navigator.

1. createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig);  

React Native Top Tab Navigator Example

Let's create a top tab navigator with custom status bar and header section. In this example, we will create three different screens for "Home", "Profile" and "Settings" router. Each router screens are created in separate files.

The directory structure of the application

Create a src directory in your route project. Inside the src directory create index.js file and two other directories lib and screens. In the screens directory, we place three screens file index.js (HomeScreen), profile.js (ProfileScreen), and settings.js (SettingsScreen). In the lib directory, we implement createMaterialTopTabNavigator to create top tab navigator.

topNavigation/index.js

Make the few changes in the topNavigation/index.js file (replace './App' with './src').

1. import {AppRegistry} from 'react-native';  
2. import App from './src';  
3. import {name as appName} from './app.json';  
4.   
5. AppRegistry.registerComponent(appName, () => App);  

Create the classes and import Icon from 'react-native-vector-icons/Ionicons' package. Implement tabBarIcon and add Icon tag in it.

src/screens/index.js

1. import React, {Component} from 'react';  
2. import {View,Text} from 'react-native';  
3. import Icon from 'react-native-vector-icons/Ionicons';  
4. export default class HomeScreen extends Component{  
5.     render() {  
6.         return(  
7.             <View>  
8.                 <Text>This is Home Screen</Text>  
9.             </View>  
10.         )  
11.     }  
12. }  
13. HomeScreen.navigationOptions={  
14.             tabBarIcon:({tintColor, focused})=>(  
15.             <Icon  
16.                 name={focused ? 'ios-home' : 'md-home'}  
17.                 color={tintColor}  
18.                 size={25}  
19.             />  
20.         )  
21. }  

src/screens/profile.js

1. import React, {Component} from 'react';  
2. import {View,Text} from 'react-native';  
3. import Icon from 'react-native-vector-icons/Ionicons';  
4. export default class ProfileScreen extends Component{  
5.     render(){  
6.         return(  
7.             <View>  
8.                 <Text>this is profile screen</Text>  
9.             </View>  
10.         )  
11.     }  
12. }  
13. ProfileScreen.navigationOptions={  
14.     tabBarIcon:({tintColor, focused})=>(  
15.         <Icon  
16.             name={focused ? 'ios-person' : 'md-person'}  
17.             color={tintColor}  
18.             size={25}  
19.         />  
20.     )  
21. }  

src/screens/settings.js

1. import React, {Component} from 'react';  
2. import {View,Text} from 'react-native';  
3. import Icon from 'react-native-vector-icons/Ionicons';  
4. export default class SettingScreen extends Component{  
5.     render(){  
6.         return(  
7.             <View>  
8.                 <Text>this is setting screen</Text>  
9.             </View>  
10.         )  
11.     }  
12. }  
13. SettingScreen.navigationOptions={  
14.     tabBarIcon:({tintColor, focused})=>(  
15.         <Icon  
16.             name={focused ? 'ios-settings' : 'md-settings'}  
17.             color={tintColor}  
18.             size={25}  
19.         />  
20.     )  
21. }  

src/lib/router.js

In router.js file, import createMaterialTopTabNavigator and createAppContainer functions of 'react-navigation' library. Also import all the routers classes in it and place them in such sequence as we want to display them on the top of tab navigator.

• activeTintColor: sets the mention color to the active router.
• showIcon: show {true} and hide {false} the icon of routers.
• showLabel: show {true} and hide {false} the title of routers. By default it is true.

1. import React from 'react';  
2. import {createMaterialTopTabNavigator,createAppContainer} from 'react-navigation';  
3. import HomeScreen from "../screens/index";  
4. import ProfileScreen from "../screens/profile";  
5. import SettingScreen from "../screens/settings";  
6.   
7. const AppNavigator = createMaterialTopTabNavigator(  
8.     {  
9.         Home: HomeScreen,  
10.         Profile: ProfileScreen,  
11.         Settings: SettingScreen,  
12.     },  
13.     {  
14.         tabBarOptions: {  
15.             activeTintColor: 'white',  
16.             showIcon: true,  
17.             showLabel:false,  
18.             style: {  
19.                 backgroundColor:'red'  
20.             }  
21.         },  
22.     }  
23. )  
24. export default createAppContainer(AppNavigator);  

src/index.js

Import AppNavigator from './lib/router' and assign the AppNavigator in a const AppIndex in this file. Customize the status bar using StatusBar tag and add header on the top of tab navigator.

1. import React, {Component} from 'react';  
2. import {StyleSheet, Text, View,StatusBar} from 'react-native';  
3. import {createAppContainer} from 'react-navigation';   
4. import Icon from 'react-native-vector-icons/Ionicons';  
5.   
6. import AppNavigator from './lib/router';  
7. const AppIndex = createAppContainer(AppNavigator)  
8.   
9. export default class App extends Component{  
10.     render(){  
11.         return(  
12.             <View style={{flex:1}} >  
13.                 <StatusBar  
14.                     backgroundColor='red'  
15.                     barStyle='light-content'  
16.                 />  
17.                 <View style={styles.header}>  
18.                     <Icon name='ios-camera' size={28} color='white'/>  
19.                     <Icon name='ios-menu' size={28} color='white'/>  
20.                 </View>  
21.                 <AppIndex/>  
22.             </View>  
23.         )  
24.     }  
25. }  
26. const styles = StyleSheet.create({  
27.     wrapper: {  
28.         flex: 1,  
29.     },  
30.     header:{  
31.         flexDirection: 'row',  
32.         alignItems: 'center',  
33.         justifyContent: 'space-between',  
34.         backgroundColor: 'red',  
35.         paddingHorizontal: 18,  
36.         paddingTop: 5,  
37.     }  
38. });  

Output: