React Native Drawer Navigator with Custom Sidebar Menu with Icons Tutorial

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.

Screenshot:

Screenshot of CMD after successfully installed the library:

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

3. Import DrawerNavigator component from react navigation library.

4. Import StackNavigator component from react navigation library into your project. Without the StackNavigator we cannot use the multiple activities into your project.

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.

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.

Screenshot of Side Menu panel:

Drawer Navigator with Custom Sidebar Menu with Icons Tutorial

7. Create a new Activity class named as MainActivity. This is our main home screen activity .

YellowBox.ignoreWarnings : This function is used to remove the yellow box warning messages from your react native application screen.

Screenshot of MainActivity:

8. Create a new class named as SecondActivity, This would be our second activity screen.

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.

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.

11. Create the DrawerNavigator calling panel and call all above three activities constants inside them .

contentComponent : Calling the Custom_Side_Menu class .

12. Creating Style.

13. Complete source code for App.js File :

Screenshots:

Drawer Navigator with Custom Sidebar Menu with Icons Tutorial

35 Comments

  1. 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.

  2. hello sir

  3. this post is new but why you are using react navigation v1 there is already a stable version 2 available with lots of changes .

  4. Md. Sorewar Alam

    How sent login data Sidebar Menu for show using login name, image?

  5. Dear Admin,
    Your tutorials are very helpful. Can tutorials be included for and ?
    Many thanks in advance!

  6. 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.

  7. 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

  8. Hallo,, I want to ask , why in my project all image/icon can’t showing ??

  9. Hello,How to set Drawer Navigator after login screen

  10. Ibrahim Khalil Ullah

    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);
    }

  11. hi bro,
    Your tutorials are very helpful and thanks.. i need navigation drawer with tab layout, how to add tab layout in main activity

  12. 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.

  13. creactStackNavigation are not working same issue

Leave a Reply

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