React Native
Nested navigation
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.
Exercise 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.
Show example 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.
Test yourself
-
Render the nested navigator
<Drawer.Navigator>
<Drawer.Screen name="Home" component={____} />
</Drawer.Navigator>
Show answer
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeStack} />
</Drawer.Navigator>
-
Match the concept to its role
- Drawer
- Main sections
- Stack
- In-section flow
- Nested
- Inside each other
- HomeStack
- Stack component
-
What is the Drawer's role in nested navigation?
<Drawer.Navigator>...</Drawer.Navigator>
- Presents the main sections; each section has its own Stack
- Manages navigation within a section
- Skoru hesaplar
- Validates a form
Show answer
Presents the main sections; each section has its own Stack — The Drawer offers main sections; each section carries its own Stack.
Next lesson: Summary - Drawer navigation
