A template to demonstrate one possible way to implement tabs and drawers on react-navigation
I found myslef reiventing a wheel recently as I was thinking about how to construct architecture on a project which required me to implement bottom tabs and drawer on the same screen.
Here is the basic idea (from the top to the bottom) :
- App.js initializes a createAppContainer(drawerNavigator)
- My drawer navigator holds a BottomTabNavigatorWrapper as the only screen. It is responsible to present an actual drawer.
- BottomTabNavigatorWrapper is just a wrapper (** stack navigator ** ) above the bottom tab navigator
- BottomTabNavigator.js is the most deepest navigator in the tree. It is responsible to present actual bottom tabs