React-native custom Navigation Drawer / Sidebar

In this Article, we learn about how to implement React-native custom Navigation Drawer / Sidebar, we are going to use react-navigation to make react-native navigation drawer, so let’s start step by step we have to create a new project and install some libraries, This Example is for React Navigation 3.+ and React-native version <60 and >60

1. Create a new project

before this, I request everyone to go to through this tutorial after creating project  goto to project root directory and install the following libraries

Note:- If you are using React-native version <0.60.0 then do following otherwise you don’t run following link command React-native >0.60.0 and above versions support auto-linking

In above command –save is optional after installation of this library we need to link this to our project using the following command, this library will help you to swap navigation bar with touch gesture

I have updated my project to React-native version 60.0, so here are my Package.json dependencies:

2. Folder structure

As we see in the folder structure I have created components folder in this I have created CustomMenuSidebar.js, Home.js, MyList.js let’s start with CustomMenuSidebar.js

3. CustomMenuSidebar

Here is the code for custom navigation component, please read comments in below code

As we see in the above file we create a layout for NavBar which we will use in App.js during navigation drawer setup before going toward App.js  first have to create Home.js and MyList.js as follows

4. Home.js

5. MyList

Added same code for both screens just for explanation, now let’s see App.js

6. App.js

Note:- If you are using React-native version <0.60.0 then do following changes

After completing this just goto android folder –> app –> src –> main –> java –> com –> projectName –> MainActivity.java we have to @Override on method createReactActivityDelegate and add following return code in it

MainActivity.java looks like follows

This RNGestureHandlerEnabledRootView will help you to swap Navigation Drawer using Touch Gesture like below

Note:- If you are using React-native version >0.60.0 or above then add following code in your index.js file

This will help you to swap Navigation Drawer using Touch Gesture like below, so you index.js look like

Output:-

Thank you.. 🙂

 

11 Replies to “React-native custom Navigation Drawer / Sidebar”

  1. Invariant Violation:
    Native module cannot be null

    updated the
    import {createAppContainer} from ‘react-navigation’;
    import {createDrawerNavigator} from ‘react-navigation-drawer’
    import {createStackNavigator} from ‘react-navigation-stack’;
    since the older is not supporting anymore.
    Can you take a look at this

    1. Hi Sai, I have updated the project on react-native version 0.60.0, Please check the latest code
      Basically you need not link libraries, React-native latest version support Auto-linking, That’s why you facing “Native module cannot be null” just unlink react-native-gesture-handler using the following command

      react-native unlink react-native-gesture-handler

      and add following line’s in your index.js

      import { gestureHandlerRootHOC } from ‘react-native-gesture-handler’
      AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

Leave a Reply

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