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:
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: 'https://reactnativecode.com/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: 'https://reactnativecode.com/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 :
React Native flexDirection Row Column Explained iOS Android example
React Native Create Rounded Corners Button Android iOS Tutorial
React Native Show Copyright Symbol © Icon in Text in iOS Android
React Native Add Background Animation on ScrollView Scroll Event
React Native Create Custom Rectangle Square Shape View Dynamically
