Drawer Navigator in react native also known as Navigation drawer is a full screen view UI(User Interface) that shows all the applications main navigational menus and activities on a let to right sliding panel. Navigational Drawer is basically hide when no need and can be viewed on left to right finger swipe gesture on mobile phone screen. React Native supports the Navigational drawer using React Navigation Library in both Android and iOS applications. So in this tutorial we would going to implement Drawer Navigator in Android iOS react native application example tutorial with Hamburger Icon placement. The drawer opening and closing will be controlled by pressing the Hamburger Icon at the top left side of application screen. So let’s get started .
Note : There are some error in this code with newly react native version, but the error has been solved and now this code is successfully compatible with newly launched react native version.
Contents in this project Drawer Navigator in Android iOS React Native App Example Tutorial with Hamburger Icon :
1. Before getting started the coding we need install the React Navigation Library in order to use the Drawer Navigator in our react native app. So to install this library you need to open your React Native Project folder path in Command Prompt(CMD), like i did in below screenshot and execute the below command.
|
1
|
npm install —save react–navigation
|
Screenshot of CMD after successfully installed the library:
2. Import StyleSheet, Platform, View, Text, Image, TouchableOpacity and YellowBox component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox } from ‘react-native’;
|
3. Import DrawerNavigator and StackNavigator in your project. Here StackNavigator is for control the activity structure and DrawerNavigator for showing all the activities into drawer navigation format.
|
1
2
3
|
import { DrawerNavigator } from ‘react-navigation’;
import { StackNavigator } from ‘react-navigation’
|
4. Create a new class in your App.js file named as HamburgerIcon, This class would render the Hamburger Icon on every activity present in Navigational drawer at the top left side of mobile screen. We have uploaded the Hamburger Icon on our website and calling directly using URL.
toggleDrawer : Inside this function we would call the this.props.navigationProps.toggleDrawer() inbuilt method of drawer navigator of react navigation library. This method would open the drawer navigator on Hamburger Icon onPress event.
|
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
|
class HamburgerIcon extends Component {
toggleDrawer=()=>{
console.log(this.props.navigationProps);
this.props.navigationProps.toggleDrawer();
}
render() {
return (
<View style={{flexDirection: ‘row’}}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)} >
<Image
source={{uri : ‘/wp-content/uploads/2018/04/hamburger_icon.png’}}
style={{ width: 25, height: 25, marginLeft: 5}}
/>
</TouchableOpacity>
</View>
);
}
}
|
5. Create a class named as MainActivity, this would be our First Activity 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
|
class MainActivity extends Component {
constructor(props) {
super(props);
YellowBox.ignoreWarnings([
‘Warning: componentWillMount is deprecated’,
‘Warning: componentWillReceiveProps is deprecated’,
]);
}
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={{fontSize: 23}}> This is Activity – 1 </Text>
</View>
);
}
}
|
6. Create a Class named as SecondActivity, This would be our second activity in this project.
|
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
|
class SecondActivity extends Component {
constructor(props) {
super(props);
YellowBox.ignoreWarnings([
‘Warning: componentWillMount is deprecated’,
‘Warning: componentWillReceiveProps is deprecated’,
]);
}
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={{fontSize: 23}}> This is Activity – 2 </Text>
</View>
);
}
}
|
7. Create another class named as ThirdActivity, This would be our third activity in this project.
|
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
|
class ThirdActivity extends Component {
constructor(props) {
super(props);
YellowBox.ignoreWarnings([
‘Warning: componentWillMount is deprecated’,
‘Warning: componentWillReceiveProps is deprecated’,
]);
}
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={{fontSize: 23}}> This is Activity – 3 </Text>
</View>
);
}
}
|
8. Now we need to create a StackNavigator constant object individually for each activity. Using this we can define each Activity action bar Title text color, Title background color and we also have to set the Hamburger Icon by setting up HamburgerIcon class at headerLeft prop.
|
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
|
const FirstActivity_StackNavigator = StackNavigator({
First: {
screen: MainActivity,
navigationOptions: ({ navigation }) => ({
title: ‘MainActivity’,
headerLeft : <HamburgerIcon navigationProps={ navigation }/>,
headerStyle: {
backgroundColor: ‘#FF9800’
},
headerTintColor: ‘#fff’,
})
},
});
const SecondActivity_StackNavigator = StackNavigator({
Second: {
screen: SecondActivity,
navigationOptions: ({ navigation }) => ({
title: ‘SecondActivity’,
headerLeft : <HamburgerIcon navigationProps={ navigation }/>,
headerStyle: {
backgroundColor: ‘#FF9800’
},
headerTintColor: ‘#fff’,
})
},
});
const ThirdActivity_StackNavigator = StackNavigator({
Third: {
screen: ThirdActivity,
navigationOptions: ({ navigation }) => ({
title: ‘ThirdActivity’,
headerLeft : <HamburgerIcon navigationProps={ navigation }/>,
headerStyle: {
backgroundColor: ‘#FF9800’
},
headerTintColor: ‘#fff’,
})
},
});
|
9. Create the DrawerNavigator method and call both above created Stack Navigator constant object inside it. This would set all 3 activities into navigational drawer.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
export default MyDrawerNavigator = DrawerNavigator({
MainStack: {
screen: FirstActivity_StackNavigator
},
SecondStack: {
screen: SecondActivity_StackNavigator
},
ThirdStack: {
screen: ThirdActivity_StackNavigator
}
});
|
10. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
alignItems: ‘center’,
justifyContent: ‘center’,
}
});
|
11. Complete source code for App.js File :
|
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
import React, { Component } from ‘react’;
import { StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox } from ‘react-native’;
import { DrawerNavigator } from ‘react-navigation’;
import { StackNavigator } from ‘react-navigation’
class HamburgerIcon extends Component {
toggleDrawer=()=>{
console.log(this.props.navigationProps);
this.props.navigationProps.toggleDrawer();
}
render() {
return (
<View style={{flexDirection: ‘row’}}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)} >
<Image
source={{uri : ‘/wp-content/uploads/2018/04/hamburger_icon.png’}}
style={{ width: 25, height: 25, marginLeft: 5}}
/>
</TouchableOpacity>
</View>
);
}
}
class MainActivity extends Component {
constructor(props) {
super(props);
YellowBox.ignoreWarnings([
‘Warning: componentWillMount is deprecated’,
‘Warning: componentWillReceiveProps is deprecated’,
]);
}
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={{fontSize: 23}}> This is Activity – 1 </Text>
</View>
);
}
}
class SecondActivity extends Component {
constructor(props) {
super(props);
YellowBox.ignoreWarnings([
‘Warning: componentWillMount is deprecated’,
‘Warning: componentWillReceiveProps is deprecated’,
]);
}
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={{fontSize: 23}}> This is Activity – 2 </Text>
</View>
);
}
}
class ThirdActivity extends Component {
constructor(props) {
super(props);
YellowBox.ignoreWarnings([
‘Warning: componentWillMount is deprecated’,
‘Warning: componentWillReceiveProps is deprecated’,
]);
}
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={{fontSize: 23}}> This is Activity – 3 </Text>
</View>
);
}
}
const FirstActivity_StackNavigator = StackNavigator({
First: {
screen: MainActivity,
navigationOptions: ({ navigation }) => ({
title: ‘MainActivity’,
headerLeft : <HamburgerIcon navigationProps={ navigation }/>,
headerStyle: {
backgroundColor: ‘#FF9800’
},
headerTintColor: ‘#fff’,
})
},
});
const SecondActivity_StackNavigator = StackNavigator({
Second: {
screen: SecondActivity,
navigationOptions: ({ navigation }) => ({
title: ‘SecondActivity’,
headerLeft : <HamburgerIcon navigationProps={ navigation }/>,
headerStyle: {
backgroundColor: ‘#FF9800’
},
headerTintColor: ‘#fff’,
})
},
});
const ThirdActivity_StackNavigator = StackNavigator({
Third: {
screen: ThirdActivity,
navigationOptions: ({ navigation }) => ({
title: ‘ThirdActivity’,
headerLeft : <HamburgerIcon navigationProps={ navigation }/>,
headerStyle: {
backgroundColor: ‘#FF9800’
},
headerTintColor: ‘#fff’,
})
},
});
export default MyDrawerNavigator = DrawerNavigator({
MainStack: {
screen: FirstActivity_StackNavigator
},
SecondStack: {
screen: SecondActivity_StackNavigator
},
ThirdStack: {
screen: ThirdActivity_StackNavigator
}
});
const styles = StyleSheet.create({
MainContainer :{
flex:1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
alignItems: ‘center’,
justifyContent: ‘center’,
}
});
|
Screenshots in Android device:
Screenshots in iOS device:
Also Read :
React Native Apply alignItems on View Explained With Example
React Native Generate SHA256 Encoded Hash Key Android iOS Example
React Navigation Latest Version 5.x in React Native Example Tutorial
Share Tweet and URL From React Native App to Twitter
React Native WebView Load Local HTML File From Assets Folder
