Drawer navigator
- React Native course
- Intermediate
- Lesson 53/116
- 5 min
Learn the Drawer navigator.
What is a Drawer navigator?
A Drawer navigator offers a menu that opens from the side of the screen. When the user taps the hamburger icon the menu slides in; selecting an item switches to that screen. Apps like Gmail and YouTube use this pattern.
The React Navigation library provides the Drawer through createDrawerNavigator. Inside a Drawer.Navigator component you write a Drawer.Screen for each screen. The menu items are listed in the order of the Drawer.Screen entries. This pattern fits apps with many main sections: home, settings, profile, about and so on. The Drawer takes no screen space; it fits more items than a bottom tab. The Drawer and Bottom Tabs can also be combined; we will see this as nested navigation later.
Practice Call createDrawerNavigator
Create a Drawer object. Import createDrawerNavigator from @react-navigation/drawer and call it; assign the result to Drawer.
Starter code
// Import the drawer navigator from @react-navigation/drawer
// Assign the navigator factory call to the Drawer variableSample solution
import { createDrawerNavigator } from "@react-navigation/drawer";
const Drawer = createDrawerNavigator();Screens and menu
Each screen is defined with a Drawer.Screen. It has two required props: name (the screen name, also the menu label) and component (the component to show when that item is selected). Example: <Drawer.Screen name="Home" component={HomeScreen} />.
The name prop is used both for the menu label and for navigation references. The component is the React component rendered for that screen. If you add multiple Drawer.Screen entries they all appear in order inside Drawer.Navigator. The Drawer opens from the left by default; the drawerPosition prop can move it to the right. The order of menu items follows the order of the Drawer.Screen entries. This structure is the basis of an app with many sections.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the Drawer navigator used for?
<Drawer.Navigator>...</Drawer.Navigator>- To manage many main sections Correct answer
- To calculate a score
- To make an API call
- To validate a form
Explanation: The Drawer is used to manage many main sections.
2 Write the Navigator component
<____>
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator><Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>Explanation: Drawer.Navigator is the Drawer container.
3 Match the concept to its role
| Term | Meaning |
|---|---|
Drawer |
Side menu |
Drawer.Navigator |
Screen container |
Drawer.Screen |
Single screen |
createDrawerNavigator |
Builds the Tab object |