React Native Drawer Navigation (createDrawerNavigator)

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: