Author: saqibkhan

React Native Drawer Navigation is an UI panel which displays the app’s navigation menu. By default it is hidden when not in use, but it appears when user swipes a finger from the edge of the screen or when user touches at the top of drawer icon added at app bar.

React Native Drawer Navigation imports the createDrawerNavigator from the react-navigation library.

1. import { createDrawerNavigator } from ‘react-navigation’  

It implements the createDrawerNavigator() to add the list of classes (screens).

1. createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig);  

To open and close the drawer, use the following helper methods:

1. this.props.navigation.openDrawer();  
2. this.props.navigation.closeDrawer();  

If you like to toggle your drawer then call the following method:

1. this.props.navigation.toggleDrawer();  

Each of the above methods openDrawer(), closeDrawer(), and toggleDrawer() are simply dispatching actions as:

1. this.props.navigation.dispatch(DrawerActions.openDrawer());  
2. this.props.navigation.dispatch(DrawerActions.closeDrawer());  
3. this.props.navigation.dispatch(DrawerActions.toggleDrawer());  

Before creating the React Native drawer navigation, first go through the React Native Navigation where we discussed the react-navigation installation process.

React Native Drawer Navigation Example

Create two separate classes “DashboardScreen” and “WelcomeScreen” in the react native app to display on screen. Add these screens to createStackNavigator and add “md-menu” icon of ‘react-native-vector-icons/Ionicons‘ package. On pressing the menu icon, call navigation.openDrawer() method to open drawer.

Now, import createDrawerNavigator from ‘react-navigation‘ package and implement createDrawerNavigator(). After that add the stack navigation screen over it.

1. import React, { Component } from ‘react’;  
2. import { View, Text, StyleSheet, Button } from ‘react-native’;  
3. import Icon from ‘react-native-vector-icons/Ionicons’;  
4.   
5. import {  
6.     createSwitchNavigator,  
7.     createAppContainer,  
8.     createDrawerNavigator,  
9.     createStackNavigator  
10. } from ‘react-navigation’;  
11. export default class App extends Component {  
12.     render() {  
13.         return <AppContainer />;  
14.     }  
15. }  
16.   
17. class WelcomeScreen extends Component {  
18.     static navigationOptions = {  
19.          title: ‘Welcome’,  
20.     };  
21.     render() {  
22.         return (  
23.             <View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>  
24.                 <Text>WelcomeScreen</Text>  
25.                 <Button  
26.                     title=”Go to DashboardScreen”  
27.                     onPress={() => this.props.navigation.navigate(‘Dashboard’)}  
28.                 />  
29.             </View>  
30.         );  
31.     }  
32. }  
33.   
34. class DashboardScreen extends Component {  
35.     static navigationOptions = {  
36.          title: ‘Dashboard’,  
37.     };  
38.   
39.     render() {  
40.         return (  
41.             <View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>  
42.                 <Text>DashboardScreen</Text>  
43.             </View>  
44.         );  
45.     }  
46. }  
47. const DashboardStackNavigator = createStackNavigator(  
48.     {  
49.         DashboardNavigator: DashboardScreen  
50.     },  
51.     {  
52.         defaultNavigationOptions: ({ navigation }) => {  
53.         return {  
54.             headerLeft: (  
55.                 <Icon  
56.                     style={{ paddingLeft: 10 }}  
57.                     onPress={() => navigation.openDrawer()}  
58.                     name=”md-menu”  
59.                     size={30}  
60.                 />  
61.             )  
62.         };  
63.         }  
64.     }  
65. );  
66.   
67. const WelcomeStackNavigator = createStackNavigator(  
68.     {  
69.         WelcomeNavigator: WelcomeScreen  
70.     },  
71.     {  
72.         defaultNavigationOptions: ({ navigation }) => {  
73.             return {  
74.                 headerLeft: (  
75.                     <Icon  
76.                         style={{ paddingLeft: 10 }}  
77.                         onPress={() => navigation.openDrawer()}  
78.                         name=”md-menu”  
79.                         size={30}  
80.                     />  
81.                 )  
82.             };  
83.         }  
84.     }  
85. );  
86. const AppDrawerNavigator = createDrawerNavigator({  
87.     Dashboard: {  
88.         screen: DashboardStackNavigator  
89.     },  
90.     Welcome: {  
91.         screen: WelcomeStackNavigator  
92.     },  
93. });  
94.   
95. const AppSwitchNavigator = createSwitchNavigator({  
96.     Dashboard: { screen: AppDrawerNavigator },  
97.     Welcome: { screen: WelcomeScreen },  
98.   
99. });  
100.   
101. const AppContainer = createAppContainer(AppSwitchNavigator);  
102.   
103. const styles = StyleSheet.create({  
104.     container: {  
105.         flex: 1,  
106.         alignItems: ‘center’,  
107.         justifyContent: ‘center’  
108.     }  
109. });  

Output:

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:

The material style provides an extra designing effect to tab bar at the bottom of screen. The material design makes you to switch among the different screens. The tab screen components are not mounted until the screens are first focused.

To use the material design navigator, install react-navigation-material-bottom-tabs library as:

1. npm install react-navigation-material-bottom-tabs react-native-paper  

This library uses the BottomNavigation component from react-native-paper.

It is also require to install react-native-vector-icons.

1. createMaterialBottomTabNavigator(RouteConfigs, MaterialBottomTabNavigatorConfig);  

Example to Create Material Bottom Tab Navigation

In this example, we implement the material bottom tab navigator to highlights the active tab’s icons and its title. The rest of tab display only icon without the title. To use material designs, import the createMaterialBottomTabNavigator function from react-navigation-material-bottom-tabs library.

App.js

1. import React from ‘react’;  
2. import {StyleSheet, Text, View,Button} from ‘react-native’;  
3. import { createBottomTabNavigator, createAppContainer} from ‘react-navigation’;  
4. import { createMaterialBottomTabNavigator } from ‘react-navigation-material-bottom-tabs’;  
5. import Icon from ‘react-native-vector-icons/Ionicons’;  
6. class HomeScreen extends React.Component {  
7.   render() {  
8.     return (  
9.         <View style={styles.container}>  
10.           <Text>Home Screen</Text>  
11.         </View>  
12.     );  
13.   }  
14. }  
15. class ProfileScreen extends React.Component {  
16.   render() {  
17.     return (  
18.         <View style={styles.container}>  
19.           <Text>Profile Screen</Text>  
20.         </View>  
21.     );  
22.   }  
23. }  
24. class ImageScreen extends React.Component {  
25.     render() {  
26.         return (  
27.             <View style={styles.container}>  
28.                 <Text>Image Screen</Text>  
29.             </View>  
30.         );  
31.     }  
32. }  
33. class CartScreen extends React.Component {  
34.     render() {  
35.         return (  
36.             <View style={styles.container}>  
37.                 <Text>Cart Screen</Text>  
38.             </View>  
39.         );  
40.     }  
41. }  
42. const styles = StyleSheet.create({  
43.     container: {  
44.         flex: 1,  
45.         justifyContent: ‘center’,  
46.         alignItems: ‘center’  
47.     },  
48. });  
49. const TabNavigator = createMaterialBottomTabNavigator(  
50.     {  
51.         Home: { screen: HomeScreen,  
52.             navigationOptions:{  
53.                 tabBarLabel:’Home’,  
54.                 tabBarIcon: ({ tintColor }) => (  
55.                     <View>  
56.                         <Icon style={[{color: tintColor}]} size={25} name={‘ios-home’}/>  
57.                     </View>),  
58.             }  
59.         },  
60.         Profile: { screen: ProfileScreen,  
61.             navigationOptions:{  
62.                 tabBarLabel:’Profile’,  
63.                 tabBarIcon: ({ tintColor }) => (  
64.                     <View>  
65.                         <Icon style={[{color: tintColor}]} size={25} name={‘ios-person’}/>  
66.                     </View>),  
67.                 activeColor: ‘#f60c0d’,  
68.                 inactiveColor: ‘#f65a22’,  
69.                 barStyle: { backgroundColor: ‘#f69b31’ },  
70.             }  
71.         },  
72.         Image: { screen: ImageScreen,  
73.             navigationOptions:{  
74.                 tabBarLabel:’History’,  
75.                 tabBarIcon: ({ tintColor }) => (  
76.                     <View>  
77.                         <Icon style={[{color: tintColor}]} size={25} name={‘ios-images’}/>  
78.                     </View>),  
79.                 activeColor: ‘#615af6’,  
80.                 inactiveColor: ‘#46f6d7’,  
81.                 barStyle: { backgroundColor: ‘#67baf6’ },  
82.             }  
83.         },  
84.         Cart: {  
85.             screen: CartScreen,  
86.             navigationOptions:{  
87.                 tabBarLabel:’Cart’,  
88.                 tabBarIcon: ({ tintColor }) => (  
89.                     <View>  
90.                         <Icon style={[{color: tintColor}]} size={25} name={‘ios-cart’}/>  
91.                     </View>),  
92.             }  
93.         },  
94.     },  
95.     {  
96.       initialRouteName: “Home”,  
97.       activeColor: ‘#f0edf6’,  
98.       inactiveColor: ‘#226557’,  
99.       barStyle: { backgroundColor: ‘#3BAD87’ },  
100.     },  
101. );  
102.   
103. export default createAppContainer(TabNavigator);  

Output:

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:

React Native Tab Navigation is the most common navigation style in the mobile applications. The Tab Navigation is tabbed at the bottom of the screen or on the top below the header or sometimes as a header. It is used to switch between different route screens.

To create Tab-based navigation, import createBottomTabNavigator and createAppContainer in the root functions of the react-navigation library.

Bottom Tab Navigator Configuration

There are various configurable props of BottomTabNavigator. Some of them are:

Tab – based navigation Example

Create the two classes named as HomeScreen and ProfileScreen. Register these classes in createBottomTabNavigator function with Home and Profile tab respectively.

1. import React from ‘react’;  
2. import { StyleSheet, Text, View } from ‘react-native’;  
3. import { createBottomTabNavigator, createAppContainer } from ‘react-navigation’;  
4.   
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.     Home: HomeScreen,  
26.     Profile: ProfileScreen,  
27. });  
28. const styles = StyleSheet.create({  
29.     container: {  
30.         flex: 1,  
31.         justifyContent: ‘center’,  
32.         alignItems: ‘center’  
33.     },  
34. });  
35.   
36. export default createAppContainer(TabNavigator);  

Output:

If we set the initialRouteName: “Profile” then, it loads the “ProfileScreen” as an initial route tab.

1. const TabNavigator = createBottomTabNavigator({  
2.         Home: HomeScreen,  
3.         Profile: ProfileScreen,  
4.     },  
5.     {  
6.         initialRouteName: “Profile”  
7.     }  
8. );