createDrawerNavigator
- React Native course
- Intermediate
- Lesson 54/116
- 5 min
Learn drawer navigation with createDrawerNavigator.
Using createDrawerNavigator
createDrawerNavigator is the factory function React Navigation provides for the Drawer. When called it returns a Drawer object that contains the Drawer.Navigator and Drawer.Screen components. Import: import { createDrawerNavigator } from "@react-navigation/drawer";.
Typical usage: const Drawer = createDrawerNavigator();. Then you write <Drawer.Navigator><Drawer.Screen name="Home" component={HomeScreen} /></Drawer.Navigator>. This structure is the backbone of side menu navigation. Drawer.Navigator is a container; the parent component that wraps all screens. Drawer.Screen defines a single screen. This split is the same across all React Navigation navigators: the Navigator + Screen pair. The Drawer, unlike Bottom Tabs, keeps the menu hidden; the user sees it only when they open it. This saves space for menus with many items.
Practice Write a 2-screen Drawer navigator
Import createDrawerNavigator and assign to Drawer as in the previous lesson. Then write an App component. Return <Drawer.Navigator><Drawer.Screen name="Home" component={HomeScreen} /><Drawer.Screen name="Settings" component={SettingsScreen} /></Drawer.Navigator>. HomeScreen and SettingsScreen should be simple components (just return a Text).
Starter code
// Import the drawer navigator; assign to Drawer
// Import Text from react-native
// Write HomeScreen and SettingsScreen components (each returns a Text)
// Write the App component; return Drawer.Navigator with two Drawer.Screen insideSample solution
import { createDrawerNavigator } from "@react-navigation/drawer";
import { Text } from "react-native";
const Drawer = createDrawerNavigator();
function HomeScreen() { return <Text>Home</Text>; }
function SettingsScreen() { return <Text>Settings</Text>; }
function App() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Settings" component={SettingsScreen} />
</Drawer.Navigator>
);
}Drawer customization
The Drawer.Navigator is customized with screenOptions or each Drawer.Screen's options prop. Common settings: drawerPosition (left or right), drawerType (slide, front, back), drawerActiveTintColor (selected item color).
Example: <Drawer.Navigator screenOptions={{ drawerPosition: "right" }}> opens the menu from the right. drawerType: "front" brings the menu above the screen; back pushes the screen behind. Color settings give a look that matches the brand identity. Adding a header at the top of the Drawer (user name, avatar) is also common; this is done with the drawerContent prop. In the next lessons we will learn drawer items and the open/close function. These customizations are ways to personalize the app.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Import createDrawerNavigator
import { ____ } from "@react-navigation/drawer";import { createDrawerNavigator } from "@react-navigation/drawer";Explanation: createDrawerNavigator is imported from @react-navigation/drawer.
2 What is the role of Drawer.Navigator?
<Drawer.Navigator>...</Drawer.Navigator>- Defines a single screen
- It is the container that wraps all screens Correct answer
- Adds an icon
- Makes an API call
Explanation: Drawer.Navigator is the container that wraps all screens.
3 Match the concept to its role
| Term | Meaning |
|---|---|
createDrawerNavigator |
Builds the Drawer object |
Drawer.Navigator |
Screen container |
Drawer.Screen |
Single screen |
name |
Screen name |