React Native Navigation V5 Stack, Drawer and Tab Navigator Combined
A simple integration of Complex navigation (Stack, Drawer, BottomTab) with an Auth Flow and Redux, in react native navigation V5
In this article I’ll be explaining how to use complex navigation in react native all together i.e (Stack, Drawer, BottomTab) navigators.
As V5, is totally different from the previous versions of navigation API
I didn’t find any good articles on the internet as it’s quite new, So here I’m explaining how I accomplished it and help you to achieve the same.
I will give you a walkthrough on how to use the stack, navigator bottom tab navigator drawer navigator and building an auth flow in V5.
I’ve attached GitHub link at the end of this article.
Introduction about navigation (V5)
So Recently React Native has upgraded Navigation API
It has undergone some major changes
The new API comes with dynamic components. and made the navigation part more dynamic.
If you are familiar with old navigation then you must have faced many problems when you need to change something dynamically while navigating e.g a header title
Now this issue isn’t there, Thanks to the component-based API, all of the configuration is happening inside the render method. This means we can access props, state, and context and can dynamically change configuration for the navigator.
Enough of boring stuff let’s get on-field and implement
- First we need to create some basic screens just like this
2. The second step we need to create our navigator to navigate, so we’ll create a navigation container at root level just like below I’ve imported all the screens and libraries and created our navigators
3. Third step we’ll create stacks see below how can you do this
4. Fourth step Now let’s create our tab and drawer navigator checkout below how to do this
5. Now finally our root navigator which we’ll export to app.js
That’s it, it’s our so-called complex Drawer, Tab and Stack navigation is done with an auth flow
Now we just need to import this RootNavigator in our app.js so let’s do that
And here we are done That's’ all folks we are done here with our navigation part I'm attaching my git repository link so you can clone this boilerplate which has A simple integration of Redux, Complex navigation (Stack, Drawer, BottomTab) with an auth flow in react native
