Nested Navigation means placing one navigator inside another navigator. It is useful when a React Native application has multiple levels of navigation.
For example, an application can have a Drawer Navigator containing Bottom Tabs, while one of the tabs contains its own Stack Navigator.
Drawer
|
└── Bottom Tabs
|
├── Home Stack
│ ├── Home
│ └── Details
│
├── Courses
│
└── ProfileNested navigation means placing one navigator inside another navigator.
For example:
Stack
|
└── Tabs
|
├── Home
├── Courses
└── ProfileHere, the Tab Navigator is nested inside the Stack Navigator.
Large applications often have different navigation requirements for different sections.
Nested navigation can help organize these requirements.
A simple example is a Stack Navigator containing a Tab Navigator.
Stack Navigator
|
└── Main Tabs
|
├── Home
├── Courses
└── ProfileThe Stack can manage screens outside the tabs, while the tabs manage the main sections.
A common application structure is to create a Stack Navigator and put the Tab Navigator inside one of its screens.
Stack
|
├── Login
|
└── MainTabs
|
├── Home
├── Courses
└── ProfileThis structure can be useful when a login screen should not display the main application tabs.
import {
createBottomTabNavigator
} from '@react-navigation/bottom-tabs';
const Tab =
createBottomTabNavigator();The Tab Navigator can then contain the application's main sections.
function MainTabs() {
return (
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeScreen}
/>
<Tab.Screen
name="Courses"
component={CoursesScreen}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
/>
</Tab.Navigator>
);
}The MainTabs component now contains three tabs.
<Stack.Navigator>
<Stack.Screen
name="MainTabs"
component={MainTabs}
options={{
headerShown: false
}}
/>
</Stack.Navigator>The Tab Navigator is now being used as a screen inside the Stack Navigator.
A login screen can be placed outside the main tabs.
<Stack.Navigator>
<Stack.Screen
name="Login"
component={LoginScreen}
/>
<Stack.Screen
name="MainTabs"
component={MainTabs}
options={{
headerShown: false
}}
/>
</Stack.Navigator>The login screen and the main application tabs now belong to the same stack.
navigation.navigate(
'MainTabs'
);After successful login, the application can navigate to the main tab navigation.
navigation.replace(
'MainTabs'
);Replacing the login route can be useful when the login screen should not remain in the normal back-navigation flow.
Another common nested structure is a Drawer Navigator containing a Tab Navigator.
Drawer
|
└── MainTabs
|
├── Home
├── Courses
└── ProfileThe drawer can contain additional screens alongside the main tabs.
function MainTabs() {
return (
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeScreen}
/>
<Tab.Screen
name="Courses"
component={CoursesScreen}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
/>
</Tab.Navigator>
);
}<Drawer.Navigator>
<Drawer.Screen
name="MainTabs"
component={MainTabs}
options={{
headerShown: false
}}
/>
<Drawer.Screen
name="Settings"
component={SettingsScreen}
/>
</Drawer.Navigator>The drawer now contains the tab-based main application and a separate Settings screen.
A tab can also contain its own Stack Navigator.
Tabs
|
├── Home Stack
│ ├── Home
│ └── Details
│
├── Courses
│
└── ProfileThis is useful when the Home section has several related screens.
function HomeStack() {
return (
<HomeStackNavigator>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="Details"
component={DetailsScreen}
/>
</HomeStackNavigator>
);
}
In an actual implementation, the navigator object must be created
with createNativeStackNavigator().
<Tab.Screen
name="Home"
component={HomeStack}
/>
<Tab.Screen
name="Courses"
component={CoursesScreen}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
/>The Home tab now displays the Home Stack instead of a single screen.
If the Home tab contains a stack, the Home screen can navigate to Details normally.
navigation.navigate(
'Details'
);The Details screen belongs to the Home Stack.
A parent navigator can navigate to a screen managed by a nested navigator using the appropriate route structure.
navigation.navigate(
'MainTabs',
{
screen: 'Profile'
}
);
Here, MainTabs is the parent route and
Profile is a screen inside the nested navigator.
navigation.navigate(
'MainTabs',
{
screen: 'Profile',
params: {
userId: 101
}
}
);The nested Profile screen can receive the specified parameters.
Drawer
|
├── HomeStack
│ ├── Home
│ └── Details
│
├── Courses
│
└── SettingsThis structure allows the Home section to have multiple screens while the Drawer manages the main application sections.
Large applications can have more than two navigation levels.
Drawer
|
└── Tabs
|
└── Home Stack
|
├── Home
├── Details
└── CheckoutThis is a three-level navigation structure.
Back navigation depends on the current navigation state and the navigator that manages the current screen.
Home
↓
Details
↓
CheckoutPressing Back from Checkout normally returns to Details, and another Back action can return to Home.
Nested navigators can have their own headers. Sometimes the parent header should be hidden to avoid displaying multiple headers.
<Stack.Screen
name="MainTabs"
component={MainTabs}
options={{
headerShown: false
}}
/>This allows the nested navigator to manage its own interface.
Drawer
|
├── Main Tabs
│ ├── Home
│ ├── Courses
│ └── Profile
│
├── Assignments
│
└── SettingsThe Home and Courses sections can further contain their own stack navigation if needed.
Tabs
|
├── Home Stack
│ ├── Products
│ ├── Product Details
│ └── Reviews
│
├── Cart
│
└── ProfileThe Home section has its own stack while Cart and Profile remain individual tab screens.
import React from 'react';
import {
View,
Text
} from 'react-native';
import {
NavigationContainer
} from '@react-navigation/native';
import {
createNativeStackNavigator
} from '@react-navigation/native-stack';
import {
createBottomTabNavigator
} from '@react-navigation/bottom-tabs';
const Stack =
createNativeStackNavigator();
const Tab =
createBottomTabNavigator();
function HomeScreen({
navigation
}) {
return (
<View>
<Text>
Home Screen
</Text>
</View>
);
}
function DetailsScreen() {
return (
<View>
<Text>
Details Screen
</Text>
</View>
);
}
function CoursesScreen() {
return (
<View>
<Text>
Courses Screen
</Text>
</View>
);
}
function ProfileScreen() {
return (
<View>
<Text>
Profile Screen
</Text>
</View>
);
}
function HomeStack() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="Details"
component={DetailsScreen}
/>
</Stack.Navigator>
);
}
function MainTabs() {
return (
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeStack}
options={{
headerShown: false
}}
/>
<Tab.Screen
name="Courses"
component={CoursesScreen}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
/>
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="MainTabs"
component={MainTabs}
options={{
headerShown: false
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}| Concept | Purpose |
|---|---|
| Parent Navigator | Contains another navigator or screens |
| Nested Navigator | A navigator placed inside another navigator |
| Stack inside Tabs | Provides detailed screen flows within a tab |
| Tabs inside Stack | Provides main sections inside a stack flow |
| Drawer inside App | Provides side-menu navigation |
| screen | Selects a nested screen when navigating through a parent route |
| params | Passes data to a nested destination |
| headerShown | Controls whether a navigator screen header is displayed |
Plan Application Screens
↓
Choose Required Navigators
↓
Create Parent Navigator
↓
Create Nested Navigator
↓
Register Screens
↓
Connect Navigators
↓
Configure Headers
↓
Navigate Between Levels
↓
Pass Parameters When Required
↓
Test Back Navigation
↓
Keep the Navigation Tree SimpleNested Navigation is an important concept for larger React Native applications. By combining Stack, Bottom Tab and Drawer navigators, developers can create organized navigation structures for real-world mobile applications.
screen can be used to target a screen inside a nested navigator.params can be passed to nested destinations.Question: What does Nested Navigation mean in React Native?