How to integrate Tabs Navigation, Drawer Navigation and Stack Navigation together in React Navigation v2

React Navigation Version 2 Example

Yasmin Bano , 30 May, 2018



The most Common part of any App is navigation. In React Native, React Navigation is one of the popular library of navigation.

This Blog will explain How to integrate Tabs Navigation, Drawer Navigation and Stack Navigation together.
I have build a template which is quite often used by most of the Apps. To build this navigation template, follow the below steps:

Register app with the Route Configuration


Start with Tab Navigator

I've used createMaterialTopTabNavigator becuase createTabNavigation is degraded in React Navigation v2.

Create Drawer Navigator

Apparently in the React Navigation version2 the Drawer itself isn't closing, so I need to do it manually.Once this issue will be fixed, you don't need a saparate file for drawer screen.

Sum it up all with Stack Navigator

Its done Now

View Full Code on Gitlab

If you have any query, doubts or improvements , Please comment.

Happy Coding!

blog comments powered by Disqus