In react navigation 5.x there’s a lot of functionality has been changed. Since we know from the beginning react navigation is one of the most usable plugin for react native. React Navigation comes with many different architectures and one of them is Navigation Drawer also known as Drawer Navigator. I’ve already post a tutorial for creating navigation drawer but its old. Today we would going to learn about creating navigation drawer in react navigation latest 5.x version in react native both android and iOS platforms. We would use the Hamburger icon to show and hide the drawer navigator screen. So in this tutorial we would learn about Example of Navigation Drawer with Section Menu in React Navigation 5.x in React Native.
Contents in this project Example of Navigation Drawer with Section Menu in React Navigation 5.x in React Native:
1. The first step is download all the compulsory NPM libraries in your current react native project. So open your react native project Root directory in Command Prompt in Windows and Terminal in MAC OS. Execute below command to install React Navigation itself.
|
1
|
npm install @react–navigation/native
|
Screenshot:
Screenshot after finish installation:
2. Now we have to install its all supporting dependencies of react navigation like react-native-gesture-handler, react-native-reanimated, react-native-screens and react-native-safe-area-context and @react-native-community/masked-view. Execute below command to install them.
|
1
|
npm install react–native–reanimated react–native–gesture–handler react–native–screens react–native–safe–area–context @react–native–community/masked–view
|
Screenshot:
Screenshot after done installation:
3. Now we have to install Stack Navigator library in our current project. So execute below command to install the stack navigator.
|
1
|
npm install @react–navigation/stack
|
Screenshot:
Screenshot after done installation of Stack Navigator:
4. Now we have to install the createDrawerNavigator library in our current react native project. Execute below command to install Navigation Drawer / Drawer Navigator in your project.
|
1
|
npm install @react–navigation/drawer
|
Screenshot:
Screenshot after done installation:
5. Now for Android our project is ready to use, but for iOS devices we have to install PODS in our iOS directory to link all the newly installed packages. This step is only for iOS ( MAC ONLY ). So execute below command to install POD in your iOS project.
|
1
|
cd ios && pod install && cd ..
|
here you go friends now your project is ready to use with navigation drawer / drawer navigator. It’s time to start coding for app.
6. Open your project’s main App.js file and import StyleSheet, View, Text, Image, TouchableOpacity, SafeAreaView, react-native-gesture-handler, NavigationContainer, createStackNavigator, createDrawerNavigator, DrawerContentScrollView and DrawerItem components in your react native project.
|
1
2
3
4
5
6
7
8
9
10
11
|
import React from ‘react’;
import { StyleSheet, View, Text, Image, TouchableOpacity, SafeAreaView } from ‘react-native’;
import ‘react-native-gesture-handler’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
import { createDrawerNavigator, DrawerContentScrollView, DrawerItem } from ‘@react-navigation/drawer’;
|
7. Creating a new functional component named as HamburgerIcon with props parameter. We would use this component to display the Hamburger icon at the top left side of navigation drawer screen. We would also set click functionality on this Icon so on its click the drawer sidebar will open and close.
Hamburger Icon we’re using :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
const HamburgerIcon = (props) => {
const toggleDrawer = () => {
props.navigationProps.toggleDrawer();
}
return (
<View style={{ flexDirection: ‘row’ }}>
<TouchableOpacity onPress={toggleDrawer} >
<Image
source={{ uri: ‘/wp-content/uploads/2018/04/hamburger_icon.png’ }}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
|
8. Creating a component named as CustomSidebar. This is our custom sidebar with sectioned menu list. This component is purely dynamic and all the values of this component is directly coming form Drawer.Screen component.
|
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
|
const CustomSidebar = (props) => {
const { state, descriptors, navigation } = props;
let lastGroupName = ”;
let newGroup = true;
return (
<SafeAreaView style={{ flex: 1 }}>
<DrawerContentScrollView {...props}>
{state.routes.map((route) => {
const {
drawerLabel,
activeTintColor,
groupName
} = descriptors[route.key].options;
if (lastGroupName !== groupName) {
newGroup = true;
lastGroupName = groupName;
} else newGroup = false;
return (
<>
{newGroup ? (
<View style={styles.sectionView}>
<Text key={groupName} style={{ marginLeft: 10 }}>
{groupName}
</Text>
<View style={styles.separatorLine} />
</View>
) : null}
<DrawerItem
key={route.key}
label={
({ color }) =>
<Text style={{ color }}>
{drawerLabel}
</Text>
}
focused={
state.routes.findIndex(
(e) => e.name === route.name
) === state.index
}
activeTintColor={activeTintColor}
onPress={() => navigation.navigate(route.name)}
/>
</>
);
})}
</DrawerContentScrollView>
</SafeAreaView>
);
};
|
Screenshot of Custom Sidebar:
9. Creating 3 Screen functional component named as HomeScreen, SecondScreen and ThirdScreen. These are the screens of our 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
const HomeScreen = () => {
return (
<SafeAreaView flex={1}>
<View style={styles.MainContainer}>
<Text style={{ fontSize: 25, color: ‘black’ }}> Home Screen </Text>
</View>
</SafeAreaView>
);
};
const SecondScreen = () => {
return (
<SafeAreaView flex={1}>
<View style={styles.MainContainer}>
<Text style={{ fontSize: 25, color: ‘black’ }}> Second Screen </Text>
</View>
</SafeAreaView>
);
};
const ThirdScreen = () => {
return (
<SafeAreaView flex={1}>
<View style={styles.MainContainer}>
<Text style={{ fontSize: 25, color: ‘black’ }}> Third Screen </Text>
</View>
</SafeAreaView>
);
};
|
10. Creating all Style Sheet for project.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
padding: 10,
},
sectionView: {
flex: 1,
flexDirection: ‘row’,
alignItems: ‘center’,
marginTop: 12,
},
separatorLine: {
flex: 1,
backgroundColor: ‘black’,
height: 1.2,
marginLeft: 12,
marginRight: 24,
},
});
|
11. Creating constant object of createStackNavigator and createDrawerNavigator named as Stack and Drawer. We would use these objects to creating Stack navigator and drawer navigator.
|
1
2
|
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
|
12. Creating 3 Stack Navigator functional component each unique for each screen. Named as HomeStack, SecondStack, ThirdStack.
- initialRouteName : Screen component name which we want to open first on app start like home screen.
- component : Used to call the component which we want to display as current screen.
- title : To set screen activity title, display on header bar.
- headerLeft : To show the hamburger icon at the left side of current screen in navigation header bar.
- backgroundColor : Used to set background color of header bar.
- headerTintColor : Used to set header title text color.
|
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
|
function HomeStack({ navigation }) {
return (
<Stack.Navigator initialRouteName=“HomeScreen”>
<Stack.Screen
name=“HomeScreen”
component={HomeScreen}
options={{
title: ‘Home Screen’,
headerLeft: () => (<HamburgerIcon navigationProps={navigation} />),
headerStyle: {
backgroundColor: ‘#FF9800’,
},
headerTintColor: ‘#fff’,
}}
/>
</Stack.Navigator>
);
}
function SecondStack({ navigation }) {
return (
<Stack.Navigator
screenOptions={{
headerLeft: () => (
<HamburgerIcon navigationProps={navigation} />
),
headerStyle: {
backgroundColor: ‘#FF9800’,
},
headerTintColor: ‘#fff’,
}}>
<Stack.Screen
name=“SecondScreen”
component={SecondScreen}
options={{
title: ‘Second Screen’,
}}
/>
</Stack.Navigator>
);
}
function ThirdStack({ navigation }) {
return (
<Stack.Navigator
screenOptions={{
headerLeft: () => (
<HamburgerIcon navigationProps={navigation} />
),
headerStyle: {
backgroundColor: ‘#FF9800’,
},
headerTintColor: ‘#fff’,
}}>
<Stack.Screen
name=“ThirdScreen”
component={ThirdScreen}
options={{
title: ‘Third Screen’,
}}
/>
</Stack.Navigator>
);
}
|
13. Creating export default function App. Inside the default function we would call the NavigationContainer -> Drawer.Navigator -> Drawer.Screen components.
- drawerContent : Here we would call our CustomSidebar component. It’ll allow us the open the custom sidebar component on drawer open functionality.
- drawerLabel : The label text shows in Category or section 1.
- groupName : Used to set Group name / section name / category name.
- activeTintColor : To set Label highlight color on current label or category selection.
Note: We have only define category with same name and automatically all the label under same category will be arranged.
|
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
|
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator
drawerContent={(props) => <CustomSidebar {...props} />}>
<Drawer.Screen
name=“Home”
options={{
drawerLabel: ‘Open Home Screen’,
groupName: ‘Category 1’,
activeTintColor: ‘#FF6F00’,
}}
component={HomeStack}
/>
<Drawer.Screen
name=“Second”
options={{
drawerLabel: ‘Open Second Screen’,
groupName: ‘Category 1’,
activeTintColor: ‘#FF6F00’,
}}
component={SecondStack}
/>
<Drawer.Screen
name=“Third”
options={{
drawerLabel: ‘Open Third Screen’,
groupName: ‘Category 2’,
activeTintColor: ‘#FF6F00’,
}}
component={ThirdStack}
/>
</Drawer.Navigator>
</NavigationContainer>
);
}
|
14. 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
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
|
import React from ‘react’;
import { StyleSheet, View, Text, Image, TouchableOpacity, SafeAreaView } from ‘react-native’;
import ‘react-native-gesture-handler’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
import { createDrawerNavigator, DrawerContentScrollView, DrawerItem } from ‘@react-navigation/drawer’;
const HamburgerIcon = (props) => {
const toggleDrawer = () => {
props.navigationProps.toggleDrawer();
}
return (
<View style={{ flexDirection: ‘row’ }}>
<TouchableOpacity onPress={toggleDrawer} >
<Image
source={{ uri: ‘/wp-content/uploads/2018/04/hamburger_icon.png’ }}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
const CustomSidebar = (props) => {
const { state, descriptors, navigation } = props;
let lastGroupName = ”;
let newGroup = true;
return (
<SafeAreaView style={{ flex: 1 }}>
<DrawerContentScrollView {...props}>
{state.routes.map((route) => {
const {
drawerLabel,
activeTintColor,
groupName
} = descriptors[route.key].options;
if (lastGroupName !== groupName) {
newGroup = true;
lastGroupName = groupName;
} else newGroup = false;
return (
<>
{newGroup ? (
<View style={styles.sectionView}>
<Text key={groupName} style={{ marginLeft: 10 }}>
{groupName}
</Text>
<View style={styles.separatorLine} />
</View>
) : null}
<DrawerItem
key={route.key}
label={
({ color }) =>
<Text style={{ color }}>
{drawerLabel}
</Text>
}
focused={
state.routes.findIndex(
(e) => e.name === route.name
) === state.index
}
activeTintColor={activeTintColor}
onPress={() => navigation.navigate(route.name)}
/>
</>
);
})}
</DrawerContentScrollView>
</SafeAreaView>
);
};
const HomeScreen = () => {
return (
<SafeAreaView flex={1}>
<View style={styles.MainContainer}>
<Text style={{ fontSize: 25, color: ‘black’ }}> Home Screen </Text>
</View>
</SafeAreaView>
);
};
const SecondScreen = () => {
return (
<SafeAreaView flex={1}>
<View style={styles.MainContainer}>
<Text style={{ fontSize: 25, color: ‘black’ }}> Second Screen </Text>
</View>
</SafeAreaView>
);
};
const ThirdScreen = () => {
return (
<SafeAreaView flex={1}>
<View style={styles.MainContainer}>
<Text style={{ fontSize: 25, color: ‘black’ }}> Third Screen </Text>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
padding: 10,
},
sectionView: {
flex: 1,
flexDirection: ‘row’,
alignItems: ‘center’,
marginTop: 12,
},
separatorLine: {
flex: 1,
backgroundColor: ‘black’,
height: 1.2,
marginLeft: 12,
marginRight: 24,
},
});
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
function HomeStack({ navigation }) {
return (
<Stack.Navigator initialRouteName=“HomeScreen”>
<Stack.Screen
name=“HomeScreen”
component={HomeScreen}
options={{
title: ‘Home Screen’,
headerLeft: () => (<HamburgerIcon navigationProps={navigation} />),
headerStyle: {
backgroundColor: ‘#FF9800’,
},
headerTintColor: ‘#fff’,
}}
/>
</Stack.Navigator>
);
}
function SecondStack({ navigation }) {
return (
<Stack.Navigator
screenOptions={{
headerLeft: () => (
<HamburgerIcon navigationProps={navigation} />
),
headerStyle: {
backgroundColor: ‘#FF9800’,
},
headerTintColor: ‘#fff’,
}}>
<Stack.Screen
name=“SecondScreen”
component={SecondScreen}
options={{
title: ‘Second Screen’,
}}
/>
</Stack.Navigator>
);
}
function ThirdStack({ navigation }) {
return (
<Stack.Navigator
screenOptions={{
headerLeft: () => (
<HamburgerIcon navigationProps={navigation} />
),
headerStyle: {
backgroundColor: ‘#FF9800’,
},
headerTintColor: ‘#fff’,
}}>
<Stack.Screen
name=“ThirdScreen”
component={ThirdScreen}
options={{
title: ‘Third Screen’,
}}
/>
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator
drawerContent={(props) => <CustomSidebar {...props} />}>
<Drawer.Screen
name=“Home”
options={{
drawerLabel: ‘Open Home Screen’,
groupName: ‘Category 1’,
activeTintColor: ‘#FF6F00’,
}}
component={HomeStack}
/>
<Drawer.Screen
name=“Second”
options={{
drawerLabel: ‘Open Second Screen’,
groupName: ‘Category 1’,
activeTintColor: ‘#FF6F00’,
}}
component={SecondStack}
/>
<Drawer.Screen
name=“Third”
options={{
drawerLabel: ‘Open Third Screen’,
groupName: ‘Category 2’,
activeTintColor: ‘#FF6F00’,
}}
component={ThirdStack}
/>
</Drawer.Navigator>
</NavigationContainer>
);
}
|
Screenshots:
Also Read :
Create Initialize Integer String Boolean Float Variables in React Native
React Native Generate Random Number Between 1 to 100 in Android iOS
Add Image Icon Inside TextInput in React Native Android iOS Example
React Navigation Latest Version 5.x in React Native Example Tutorial
React Native Insert Data into Realm Local Database iOS Android Tutorial
