React Native
Drawer navigator
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.
Exercise Call createDrawerNavigator
Create a Drawer object. Import createDrawerNavigator from @react-navigation/drawer and call it; assign the result to Drawer.
Show example 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.
Test yourself
-
What is the Drawer navigator used for?
<Drawer.Navigator>...</Drawer.Navigator>
- To manage many main sections
- To calculate a score
- To make an API call
- To validate a form
Show answer
To manage many main sections — The Drawer is used to manage many main sections.
-
Write the Navigator component
<____>
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>
Show answer
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>
-
Match the concept to its role
- Drawer
- Side menu
- Drawer.Navigator
- Screen container
- Drawer.Screen
- Single screen
- createDrawerNavigator
- Builds the Tab object
Next lesson: createDrawerNavigator
