Preloader

Custom drawer with react-navigation in react-native

I was working on a react-native app in which I used react-navigation for routing. React-navigation provides 3 different types of navigators – Stack, Tab, DrawerI used all and they worked well except of Drawer. I faced some issues while integrating Drawer navigator.

My app require to display drawer only in few pages but react-navigation drawer is available in all pages throughout the app. Yes, it’s possible using nested routes but still there are different set of problems. I was able to open drawer by swiping in any page. My app needed to open drawer by click and not by swipe. Also I was not able to access DrawerNavigator instance from any other component. I don’t found any useful documentation that help me to fulfill my requirements, so I took a third-party drawer module and created custom drawer using redux option of react-navigation.

Links which I referred but have not found any meaningful solution

https://github.com/react-community/react-navigation/issues/131

https://github.com/react-community/react-navigation/issues/967

https://github.com/react-community/react-navigation/issues/725

This blog shows an example of how we can integrate custom drawer in react-navigation. It uses ‘react-native-drawer‘ module.

Create react-native app and setup redux.

Then define some routes using Stack Navigator of react-navigation. In this example there are two routes – ‘Home’ and ‘About’. Home screen will contain a menu icon in header on click of which drawer can be open. About screen will have back arrow icon to go back to Home screen.

Now lets integrate Drawer. Add ‘react-native-drawer‘ module in the app.

Create a component say AppNavigator  and call it from MainApp component. Add Drawer and Routes in this component.

In the above code, methods openDrawer() and closeDrawer() are define to toggle drawer and are passed as props in DrawerComponent as well as into navigator component as screenProps.

Also, there is a navigation prop passed to navigator which will handle the navigation state in redux. It must provide the current state and a dispatcher to handle navigation options. For this, create an Action to handle routing and respective reducer. For more details about navigation please refer react-navigation with redux.

As I said, the drawer can be open on click of menu icon in Home screen header. To do so define headerLeft property in navigationOptions of Home screen. To know about more properties visit react-navigation StackNavigator.

Home Screen

In the above code, openDrawer() method which was passed as screenProps from navigator is called on click to open drawer.

Now to navigate through drawer, lets define DrawerComponent.

In above component, there are 2 links on click of which an action is called to navigate to respective component and the drawer is closed.

Drawer

In this example, drawer can be opened only from Home screen. We cannot open it from About screen. To open drawer from any component we need to call drawer’s open method. You can explore more options of drawer from react-native-drawer.

Git repo for this example.

For any development opportunity contact us. Or call us. Or email us. We are also available on skype.