Nested Navigation
Real-world applications often require combining multiple navigators, such as placing a stack navigator inside each tab of a bottom tab navigator. This pattern is known as nested navigation.
Why Nested Navigation Is Needed
A single navigator type rarely covers all navigation needs. For example, a shopping app might use a bottom tab navigator for main sections, with each tab containing its own stack navigator for drilling into product details.
Example: Stack Inside Tabs
Navigating Between Nested Navigators
To navigate to a screen inside a different nested navigator, you must specify both the navigator name and the target screen name.
Hiding Tab Bars on Specific Nested Screens
Sometimes you want to hide the bottom tab bar when navigating deeper into a nested stack, which can be achieved using the tabBarStyle option based on the current route name.
Common Nested Navigation Patterns
- Stack Navigator inside Tab Navigator
- Tab Navigator inside Drawer Navigator
- Authentication Stack separate from Main App Stack
Conclusion
Nested navigation allows you to combine different navigator types to accurately represent complex app structures, giving users an intuitive experience that matches how modern mobile apps are typically organized.
