Integrating Stack & Drawer in React Native (React Navigation)

Let’s get use to new @react-navigation/native library

React Navigation library has released a new version (v 5.0.0), which was bit tricky for me at first glance when I was trying to add Stack Navigator and Drawer Navigator into a single app.

Let’s create a simple React Native app including both stack and drawer navigators.

Go to React Navigation site and install the dependencies if you have not included it in your app already.

file structure

I’ve created 4 screens as shown in the above image.

imports in app.js

Then inside your app.js import modules and screens as shown in the image. Then create a stack and drawer variables using createStackNavigator and createDrawerNavigator.

What I want here is to add 2 stack navigators into a single drawer navigator. Therefore I should have two Stack Navigators and one Drawer Navigator

app.js (navigators added)

If you have worked with previous versions of react navigation, here you can see the new way or rather new components that React Navigation library introduced for navigation.

Here what I have done was, I’ve created one drawer navigator and passed 2 screens or rather 2 components to it. In this case I wanted to add 2 stacks for the drawer. Therefore, I have created 2 stack navigators and passed them to drawer navigator.

I’m not going talk about the codes inside above 4 screens since I want to highly focused on how to integrate multiple navigators into a single app.

How to switch between screens and how to open drawer is clearly mentioned in the React Navigation site.

Make sure you are using one single NavigationContainer component. If you use more than one (for an example one for the drawer, one for the stack1 and one for the stack2) app will show errors and tell you to use or rather wrap all navigators inside a single NavigationContainer.

Conclusion

React Navigation library has changed a lot compare to last year so that we have to get updated on what has changed and how to use it correct and efficient manner. By looking at the above code segments you might wonder this is pretty easy, but at first glance it was hard for me, so then I thought let’s create an article on that. Hope all you have understood the concepts and with this understanding you can easily add tab navigator to your app as well.