Drawer Navigator also known as Navigation drawer is one of the most useful infrastructure to hold activities in both android and iOS applications. Drawer Navigator manages all the screens into sequential way with a customized sidebar menu panel. We have already make a tutorial on Drawer Navigator but in our previous tutorial we haven’t create the customized sidebar menu panel so this tutorial is the second part of Drawer Navigator tutorial. In this tutorial we would going to create fully customized Drawer Navigator with Custom Sidebar Menu with Icons Tutorial in react native Android iOS Example.
Contents in this project Drawer Navigator with Custom Sidebar Menu with Icons React Native iOS Android Example Tutorial:
Note: Before getting started you need to read our previous tutorial on Drawer Navigator , In this tutorial i have explained all the contents or navigational drawer .
1. First step is to install the React Navigation library in our current react native project, This step is must because using the react navigation library we can use Drawer Navigator component in our current project including Activities. So open your current react native current project folder in command prompt(Terminal) and execute below command.
|
1 |
npm install --save react-navigation |
Screenshot:
Screenshot of CMD after successfully installed the library:
2. Import StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox and Dimensions component in your project.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox, Dimensions } from 'react-native'; |
3. Import DrawerNavigator component from react navigation library.
|
1 |
import { DrawerNavigator } from 'react-navigation'; |
4. Import StackNavigator component from react navigation library into your project. Without the StackNavigator we cannot use the multiple activities into your project.
|
1 |
import { StackNavigator } from 'react-navigation' |
5. Create a new class in your App.js file named as HamburgerIcon . This class is used to put a Hamburger Icon into our navigational drawer.
toggleDrawer : This function is used to open and close the drawer navigator with its own this.props.navigationProps.toggleDrawer() inbuilt function.
|
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: 'https://reactnativecode.com/wp-content/uploads/2018/04/hamburger_icon.png' }} style={{ width: 25, height: 25, marginLeft: 5 }} /> </TouchableOpacity> </View> ); } } |
6. Create a class named as Custom_Side_Menu . This class is our main drawer navigator side menus class, Inside this class we are creating all the menus we have wanted to show inside the side panel. If you want to modify the menus structure as your requirement then simply edit this class and put your design inside render’s return block.
this.props.navigation.navigate(”) : We are calling this inbuilt function on each menu item clicked, as you can see we pass a argument inside this function as First , Second and Third which would represents as our all 3 activities.
|
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 |
class Custom_Side_Menu extends Component { render() { return ( <View style={styles.sideMenuContainer}> <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2017/10/Guitar.jpg' }} style={styles.sideMenuProfileIcon} /> <View style={{ width: '100%', height: 1, backgroundColor: '#e2e2e2', marginTop: 15}} /> <View style={{width: '100%'}}> <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}> <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/08/social.jpg' }} style={styles.sideMenuIcon} /> <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('First') }} > First Activity </Text> </View> <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}> <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/08/promotions.jpg' }} style={styles.sideMenuIcon} /> <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Second') }} > Second Activity </Text> </View> <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}> <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/08/outbox.jpg' }} style={styles.sideMenuIcon} /> <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Third') }} > Third Activity </Text> </View> </View> <View style={{ width: '100%', height: 1, backgroundColor: '#e2e2e2', marginTop: 15}} /> </View> ); } } |
Screenshot of Side Menu panel:
7. Create a new Activity class named as MainActivity. This is our main home screen activity .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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> ); } } |
Screenshot of MainActivity:
8. Create a new class named as SecondActivity, This would be our second activity screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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> ); } } |
Screenshot of Second Activity class:
9. Create a new activity class named as ThirdActivity, this would be our third and final 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 |
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> ); } } |
Screenshot of Third Activity:
10. Create 3 Constant objects named as FirstActivity_StackNavigator, SecondActivity_StackNavigator and ThirdActivity_StackNavigator. Inside each of them we would call the Hamburger Icon and define the Activity name and activity header style. This is used to call the activities from drawer navigator panel.
|
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', }) }, }); |
11. Create the DrawerNavigator calling panel and call all above three activities constants inside them .
contentComponent : Calling the Custom_Side_Menu class .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
export default MyDrawerNavigator = DrawerNavigator({ MainStack: { screen: FirstActivity_StackNavigator }, SecondStack: { screen: SecondActivity_StackNavigator }, ThirdStack: { screen: ThirdActivity_StackNavigator } }, { contentComponent: Custom_Side_Menu, drawerWidth: Dimensions.get('window').width - 130, }); |
12. Creating Style.
|
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 styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : 0, alignItems: 'center', justifyContent: 'center', }, sideMenuContainer: { width: '100%', height: '100%', backgroundColor: '#fff', alignItems: 'center', paddingTop: 20 }, sideMenuProfileIcon: { resizeMode: 'center', width: 150, height: 150, borderRadius: 150/2 }, sideMenuIcon: { resizeMode: 'center', width: 28, height: 28, marginRight: 10, marginLeft: 20 }, menuText:{ fontSize: 15, color: '#222222', } }); |
13. 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 271 272 273 274 275 276 277 278 279 280 281 282 |
import React, { Component } from 'react'; import { StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox, Dimensions } 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: 'https://reactnativecode.com/wp-content/uploads/2018/04/hamburger_icon.png' }} style={{ width: 25, height: 25, marginLeft: 5 }} /> </TouchableOpacity> </View> ); } } class Custom_Side_Menu extends Component { render() { return ( <View style={styles.sideMenuContainer}> <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2017/10/Guitar.jpg' }} style={styles.sideMenuProfileIcon} /> <View style={{ width: '100%', height: 1, backgroundColor: '#e2e2e2', marginTop: 15}} /> <View style={{width: '100%'}}> <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}> <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/08/social.jpg' }} style={styles.sideMenuIcon} /> <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('First') }} > First Activity </Text> </View> <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}> <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/08/promotions.jpg' }} style={styles.sideMenuIcon} /> <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Second') }} > Second Activity </Text> </View> <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}> <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/08/outbox.jpg' }} style={styles.sideMenuIcon} /> <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Third') }} > Third Activity </Text> </View> </View> <View style={{ width: '100%', height: 1, backgroundColor: '#e2e2e2', marginTop: 15}} /> </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 } }, { contentComponent: Custom_Side_Menu, drawerWidth: Dimensions.get('window').width - 130, }); const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : 0, alignItems: 'center', justifyContent: 'center', }, sideMenuContainer: { width: '100%', height: '100%', backgroundColor: '#fff', alignItems: 'center', paddingTop: 20 }, sideMenuProfileIcon: { resizeMode: 'center', width: 150, height: 150, borderRadius: 150/2 }, sideMenuIcon: { resizeMode: 'center', width: 28, height: 28, marginRight: 10, marginLeft: 20 }, menuText:{ fontSize: 15, color: '#222222', } }); |
Screenshots:
Also Read :
React Native Get Device Height Width on Button Click
React Native Layout Animation API Android iOS Example Tutorial
React Native Hide Dismiss Keyboard on Touch Outside Example
Upgrade Current React Native 0.63 Project to Latest Version 0.64 Guide
React Native Simple FlatList Component Android iOS Example Tutorial
Hello Sir,
I’m reading your tutorials from some days, its very helpful.
But know one has made proper tutorial on WordPress json data.
=>Please make a tutorial on WordPress Rest Api.
=>How to connect with WP backened.
=>CRUD operation with WordPress as a backened in React Native.
Thanks and Regards,
Turabali.
Thanks for your suggestion for tutorials. we will post these tutorials soon 🙂 .
Thanks a lot Sir.
I’ll be waiting for the same.
Thanks and Regards
Turabali
Welcome bro 🙂
hello sir
Yes
this post is new but why you are using react navigation v1 there is already a stable version 2 available with lots of changes .
Balaji you are right i am just using this for testing purpose you can create same functionality with V2 .
How sent login data Sidebar Menu for show using login name, image?
Bro please explain your question more briefly ?
Dear Admin,
Your tutorials are very helpful. Can tutorials be included for and ?
Many thanks in advance!
Allen please explain your question more briefly ?
How to change color of menu bar yellow to any other color please help??
Vaibhav simply edit the headerStyle: {
backgroundColor: ‘#FF9800’
} . You can put your own header color here for each screen.
Hi Bro,
Your tutorials are very good. I have one doubt. Shall I used the ‘react-native-navigation’ package, instead of ‘react-navigation’ ? Read somewhere that ‘react-navigation’ won’t be working in iOS builds. Is it true? Will be grateful if you could please clarify these.
AK
No bro i have just using the react-navigation in our some iOS applications and they are working fine in iOS build.
Thank you Bro, for the clarification.
Hallo,, I want to ask , why in my project all image/icon can’t showing ??
You are calling all the images from URL or locally ?
Hello,How to set Drawer Navigator after login screen
Gopi you want to show login data after login from drawer panel ?
how to navigate in react -native navigation V2 from the side Menu as u do in here because my code is not giving me the outpit but it is goinng through it code is here
goToScreen = btnName => {
Navigation.push(this.props.componentId,{
component: {
name: btnName
}
});
console.warn(‘id : ‘ + btnName);
}
Ibrahim you want to navigate to another screen from the side menus of the drawer navigator ?
hi bro,
Your tutorials are very helpful and thanks.. i need navigation drawer with tab layout, how to add tab layout in main activity
Sri i have to try this by myself and after that i will tell you.
thanks bro
Welcome bro 🙂 .
Sri i have just completed code for your required tutorial and i will post it withing 2 or 3 days .
i am waiting
Posted bro here is the link https://reactnativecode.com/show-tab-navigator-inside-drawer-navigator/ .
thanks bro
Welcome bro 🙂 .
is not work Sir. in this progran showing error….
“undefined is not a function react navigation.StackNavigator”
Fahad its not working because with the new version of react navigation the StackNavigator name is changed and its now createStackNavigator so you have to try it with new component.
creactStackNavigation are not working same issue
Drawer not getting toggled on selecting same Screen from Navigation Drawer for e.g. Your are on ‘Second Activity’ > Open Navigation Drawer > Select ‘Second Activity’ from drawer menu.
Thanks for notifying Amit.
I am new to React Native. Could you please share the solution.
Amit if you select the same screen then the drawer will not be load, You want to reload the drawer screen data ?
No, i do not want to reload the data.
Then what do you want please explain bro .
For a good user experience, I need the drawer to CLOSE. Your are on ‘Second Activity’ > Open Navigation Drawer > Select ‘Second Activity’ from drawer menu -> Close the drawer.
Hello sir,
Can you tell me please how to send a value that was calculated when we press on an item in the Custom_Side_Menu class to another component or a screen which represented in the stack navigator?
‘MyDrawerNavigator’ is not defined. (no-undef)
Thanks for your useful tutorial, How can I put drawer on a screen that is not in the drawer menu Item?
Zahra please be more specific you want to put the drawer without without sliding drawer menu ?
showing some error undefined is not a function (near ‘…(0, _reactNavigation.DrawerNavigator)…’)
is it possible to create sideNavbar without using StackNavigator
in android
AndroidDrawer is there we can create but I am not getting an idea about ios
react-native import list does not contain Component
When you run it this error show:
“TypeError: Super expression must either be null or a function”
Debugger doesn’t show error line in App.js
Kunt the react navigation is updated and all the methods has been changed. So i will soon post a new tutorial with new updated react navigation.
your tutorial really helpful…Ty!!!!