React Native Drawer Navigator Android iOS Tutorial with Hamburger Icon

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.

Screenshot of CMD after successfully installed the library:

2. Import StyleSheet, Platform, View, Text, Image, TouchableOpacity and YellowBox component in your project.

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.

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.

5. Create a class named as MainActivity, this would be our First Activity class.

6. Create a Class named as SecondActivity, This would be our second activity in this project.

7. Create another class named as ThirdActivity, This would be our third activity in this project.

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.

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.

10. Creating Style.

11. Complete source code for App.js File :

Screenshots in Android device:

Drawer Navigator Android iOS Tutorial Screenshots in iOS device:

33 Comments

  1. Hi,
    Have tried using the example above but am getting an error?
    JavaScript build up to 99% then stop and give an error “JavaScript failed to build”
    “Failed building JavaScript bundle”

  2. hello sir,
    I have an app login screen when i navigate to dashboard screen after successfully login then navigation drawer header details does not change , it only changes after app is restart …..any solution for this ??

    • Sangeeta can you show us the sample code ?

      • const MyProject = StackNavigator(
        {

        Splash: { screen: Splash_screen

        },

        MenuScreen: { screen: DrawerMenu

        },

        First: { screen: Login_Screen },

        Second: { screen: MainActivity },

        Third: { screen: SecondScreen },

        Fourth: { screen: SecondActivity },

        Fifth: { screen: Register_screen },

        Sixth: { screen: Profile_details },

        Vacation: { screen: Vacation_plan },

        profile: { screen: My_profile },

        pass_change: { screen: Change_password },

        add_staff: { screen: Add_Staff },

        add_shift: { screen: Add_Remove_Shift }

        });

        const Drawer = DrawerNavigator(
        {
        Main: { screen: MyProject }
        },
        {
        contentComponent: DrawerMenu,
        drawerWidth: 200
        }
        );

        export default Drawer;

        • sir, this is my app.js code and the below one is for drawer.js ,i just want to set asyncstorage data in email text in header but it always shows after app getting restarted.

          class DrawerMenu extends React.Component {
          _navigate(route) {
          return this.props.navigation.dispatch(
          NavigationActions.reset({
          index: 0,
          actions: [NavigationActions.navigate({ routeName: ${route} })]
          })
          );
          }

          constructor(){
          super()
          this.state = {

          email: ”,

          image:”,

          show_doctor_menu: true,

          show_patient_menu: false

          }
          // this.onSelect = this.onSelect.bind(this)
          }

          componentDidMount = () => {

          AsyncStorage.getItem(’email’).then((value) => {
          if (value) {
          //this.setState({ ‘points’: value })

          this.setState({ ’email’: value })
          //Alert.alert(this.state.email);
          }
          })
          }

  3. In my Case, on pressing Hamburger Icon(menu) drawer will not open. swipe left side then drawer open and work properly. i did exactly your code. I need on Pressing menu drawer will open. Correct me whats going wrong .

    • Pooja i have just now checked this whole code in my Android Oreo device and it is working fine, Please tell me on which version of android you’ve been testing this code ?

  4. Android Version: 5.1.1 (lollypop).
    “react”: “16.3.1”,
    “react-native”: “0.55.3”,
    “react-navigation”: “^2.0.0-rc.9”

    Please find the version info above:
    Actually when i am swiping to the right drawer opens perfectly but when i am clicking on menu button the drawer is not opening.

    But i need that click event.

    Suggest me some solution

    • I have solved the issue, You are right it has some problem with latest version of React Native now all you have to do is Inside the toggleDrawer() function use this this.props.navigationProps.toggleDrawer(); and remove the previous line. I have updated the post code so just copy and paste it. Thanks 🙂 .

  5. Thanks, its working now.
    I have one more question regarding react native admob. It is not working in “react-native”: “0.55.3”. Can you suggest me some solution?
    Actually I tried react-native admob in version 0.46 . It is working perfectly there but there are some other issues regarding navigation.
    so can you suggest me some solution for fixing admob issue in react-native version 0.55 ….. Thanks in Advance 🙂

    • Sorry Pooja, I have not tried yet AdMob in our apps, but when i will i will surely publish tutorial regarding to this query, Actually i have a exam on 12th May so i am a little busy right now, after that i will publish tutorial on AdMob 🙂 .

  6. Ok, Thanks.
    All the Best..

  7. How to add icons to the menu items?

  8. I have this error. What should I fix it ? thanks.
    warning ismounted(…) is deprecated in plain javascript react classes

  9. Hello, sir, I am using your code to create Drawer menu but now I want to add a forget password screen link in my home page screen. But without adding that screen as menu link in Drawer Menu. can you help me this.
    Here is my code for route.js file
    import React, {Component} from ‘react’;
    import HomeScreen from ‘./home’;
    import Login from ‘./login’;
    import Register from ‘./register’;
    import Profile from ‘./profile’;
    import SideMenu from ‘./sidemenu’;
    import MenuIcon from ‘./hemburg’;
    import { DrawerNavigator } from ‘react-navigation’;
    import { StackNavigator } from ‘react-navigation’;
    import { StyleSheet,Text,View,Button,TextInput,TouchableOpacity } from ‘react-native’;

    const FirstActivity_StackNavigator = StackNavigator({
    HomeScreen: {
    screen: HomeScreen,
    navigationOptions: ({ navigation }) => ({
    title: ‘Home’,
    headerLeft : ,
    headerStyle: {
    backgroundColor: ‘#FF9800’
    },
    headerTintColor: ‘#fff’,
    })
    },
    });

    const SecondActivity_StackNavigator = StackNavigator({
    Login: {
    screen: Login,
    navigationOptions: ({ navigation }) => ({
    title: ‘Login’,
    headerLeft : ,
    headerStyle: {
    backgroundColor: ‘#FF9800’
    },
    headerTintColor: ‘#fff’,
    headerRight:
    navigation.navigate(‘Home’)}
    style={{margin:10,backgroundColor:’orange’,padding:10}}>
    Home
    ,
    })
    },
    });

    const ThirdActivity_StackNavigator = StackNavigator({
    Register: {
    screen: Register,
    navigationOptions: ({ navigation }) => ({
    title: ‘Registration’,
    headerLeft : ,
    headerStyle: {
    backgroundColor: ‘#FF9800’
    },
    headerTintColor: ‘#fff’,
    headerRight:
    navigation.navigate(‘Home’)}
    style={{margin:10,backgroundColor:’orange’,padding:10}}>
    Home
    ,
    })
    },
    });

    export default MyDrawerNavigator = DrawerNavigator({
    Home: {
    screen: FirstActivity_StackNavigator
    },

    Login: {
    screen: SecondActivity_StackNavigator
    },

    Register: {
    screen: ThirdActivity_StackNavigator
    },
    });

    Here is the code for index.js

    import React, {Component} from ‘react’;
    import Routers from ‘./routes’;
    import {AppRegistry} from ‘react-native’;

    export default class CustomDrawer extends Component {
    render () {
    return (

    );
    }
    }

    AppRegistry.registerComponent(‘CustomDrawer’, () => CustomDrawer);

    Here is the code for my index.android.js

    import app from ‘./pages/index’;
    export default app;

  10. Very F**king good Tutorial sir!!!!

  11. Hi, do you have this in a .git repo?. Thanks

  12. How to add a divider to drawer below third activity

  13. I’m getting this error when i trying to run on genymotion emulator:
    “a fatal error was encountered while rendering the root component”

    • Bro i have checked this tutorial on real android and iOS device and its working fine .

      • Let me try again. I hope it’s not because i’m using mac OS

      • Bro, when i tried to install react-navigation, i got this error:
        Unhandled rejection Error: Command failed: /usr/bin/git clone –depth=1 -q -b v0.22.0-exp.0 git://github.com/expo/react-native-maps.git /Users/nerko/.npm/_cacache/tmp/git-clone-3b0316ac
        /Users/nerko/.npm/_cacache/tmp/git-clone-3b0316ac/.git: Permission denied

        and after got bunch of warnings, one of them:
        npm WARN [email protected].2 requires a peer of [email protected]* but none is installed. You must install peer dependencies yourself.

        Is there any solution? I’m trying to figure out what’s wrong three days… 🙁

      • Yes, it’s works on windows. My mac OS has some problems with fetching files… sorry for disturbing bro

  14. getting error (0 , _reactNavigation.StackNavigator) is not a function

    • Falguni react navigation is updated into 3.0 version so the Stack navigator is deprecated you need to update the react navigation and use createStackNavigator is place of that.

Leave a Reply

Your email address will not be published. Required fields are marked *