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

The most common part of any app is navigation. In React Native, React Navigation is one of the most popular navigation libraries. This blog will explain how to integrate Tabs Navigation, Drawer Navigation, and Stack Navigation together in React Navigation v2.

I have built a template which is quite often used by most of the apps. To build this navigation template, follow the steps below:

Register App with the Route Configuration

// View the complete code example on GitLab
// https://gitlab.com/readybytes/ReactNavigationExampleVersion2

Start with Tab Navigator

// Using createMaterialTopTabNavigator
// View the complete code example on GitLab

I've used createMaterialTopTabNavigator because createTabNavigation is deprecated in React Navigation v2.

Create Drawer Navigator

// Drawer Navigator implementation
// View the complete code example on GitLab

Apparently in React Navigation version 2, the Drawer itself isn't closing automatically, so I need to do it manually. Once this issue is fixed, you won't need a separate file for the drawer screen.

// Manual drawer closing implementation
// View the complete code example on GitLab

Sum It All Up with Stack Navigator

// Stack Navigator integration
// View the complete code example on GitLab

That's it! You've successfully integrated all three navigation types together.

View Full Code on GitLab

If you have any queries, doubts, or suggestions for improvements, please comment below.

Happy Coding!