Nested navigation
- React Native course
- Intermediate
- Lesson 57/116
- 5 min
Learn to nest Stack and Drawer.
Nested navigation
Nested navigation is using two or more navigators together. A common pattern is Drawer + Stack. The Drawer offers main sections; inside each section a Stack handles screen-to-screen transitions.
Example: the Drawer has "Home" and "Profile" sections. Each section is a Stack; the Home Stack contains the home and detail screens, the Profile Stack contains the profile and edit screens. This pattern keeps the app organized. The Drawer manages top-level sections, the Stack manages each section's flow. Nesting navigators is one of React Navigation's strengths. When the user switches sections each section's Stack state is preserved. This is the basis of complex apps.
Practice Write nested Drawer + Stack
Write a HomeStack component: import createNativeStackNavigator from @react-navigation/native-stack, assign to Stack. Return <Stack.Navigator><Stack.Screen name="Home" component={HomeScreen} /></Stack.Navigator>. Import createDrawerNavigator, assign to Drawer. In the App component return <Drawer.Navigator><Drawer.Screen name="Home" component={HomeStack} /></Drawer.Navigator>. HomeScreen should be a simple component.
Starter code
// Import the native stack navigator and the drawer navigator
// Assign to Stack and Drawer
// Import Text from react-native
// Write HomeScreen (returns a Text)
// Write HomeStack: Stack.Navigator with a Stack.Screen inside
// Write App: Drawer.Navigator with a Drawer.Screen showing HomeStackSample solution
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { Text } from "react-native";
const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();
function HomeScreen() { return <Text>Home</Text>; }
function HomeStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
);
}
function App() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeStack} />
</Drawer.Navigator>
);
}Why nested navigators?
Using nested navigators keeps the app organized. The Drawer separates main sections; each section carries its own Stack. This also improves the user experience: when the user navigates inside a section the Stack state is preserved; switching sections and coming back continues from the same place.
Example: in the Home Stack you went to the detail screen, then from the Drawer you switched to the Profile section. Returning to Home from Profile, the Home Stack is still on the detail screen. This is an advantage nested navigators offer. A header bar with a hamburger icon appears above the Drawer, consistent across sections. Nested navigators form the basis of professional React Native apps. This pattern makes the user experience smooth.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Render the nested navigator
<Drawer.Navigator>
<Drawer.Screen name="Home" component={____} />
</Drawer.Navigator><Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeStack} />
</Drawer.Navigator>Explanation: HomeStack is a Stack navigator component; it is given to Drawer.Screen's component.
2 Match the concept to its role
| Term | Meaning |
|---|---|
Drawer |
Main sections |
Stack |
In-section flow |
Nested |
Inside each other |
HomeStack |
Stack component |
3 What is the Drawer's role in nested navigation?
<Drawer.Navigator>...</Drawer.Navigator>- Presents the main sections; each section has its own Stack Correct answer
- Manages navigation within a section
- Skoru hesaplar
- Validates a form
Explanation: The Drawer offers main sections; each section carries its own Stack.