Drawer toggle
- React Native course
- Intermediate
- Lesson 56/116
- 5 min
Learn to open/close the drawer.
Drawer toggle
To open and close the Drawer you use the useNavigation hook. This hook gives the navigation object inside a component. navigation.toggleDrawer() opens or closes the Drawer; navigation.openDrawer() only opens it; navigation.closeDrawer() only closes it.
Typical usage: you pass () => navigation.toggleDrawer() to a button's onPress. This button is usually the hamburger icon in the header bar. You import the useNavigation hook from @react-navigation/native: import { useNavigation } from "@react-navigation/native";. When the Drawer is open and the user selects an item the Drawer closes automatically and switches to the selected screen. This behavior is the default; no extra code needed. The Drawer toggle is the user's main way to reach the menu.
Practice Write a Drawer toggle button
Write a HomeScreen component. Import useNavigation from @react-navigation/native and call it; assign to navigation. Return a Button; set its onPress to () => navigation.toggleDrawer() and its title to "Menu". Import Text and Button from react-native.
Starter code
// Import the navigation hook
// Import Text and Button from react-native
function HomeScreen() {
// Call the hook; assign to navigation
// Return a Button; on press open/close the Drawer
return null;
}Sample solution
import { useNavigation } from "@react-navigation/native";
import { Button, Text } from "react-native";
function HomeScreen() {
const navigation = useNavigation();
return (
<>
<Text>Home</Text>
<Button title="Menu" onPress={() => navigation.toggleDrawer()} />
</>
);
}The useNavigation hook
useNavigation is a hook provided by React Navigation. It gives the navigation object inside a component. This object carries every navigation function: navigate, goBack, toggleDrawer, openDrawer, closeDrawer.
The hook lets you use navigation from anywhere in a component instead of reaching the navigator through props. In deep component trees you can call navigation without prop drilling. This keeps the code clean. navigation.navigate("Settings") switches to another screen; navigation.goBack() returns to the previous screen. When used with the Drawer, navigation.toggleDrawer() opens and closes the menu. This hook is one of the most used APIs in React Navigation. You will see it in all modern React Navigation code.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does navigation.toggleDrawer() do?
navigation.toggleDrawer();- Only opens the Drawer
- Only closes the Drawer
- Nothing
- Closes the Drawer if open, opens it if closed Correct answer
Explanation: toggleDrawer opens or closes the Drawer depending on its state.
2 Call useNavigation
const ____ = useNavigation();const navigation = useNavigation();Explanation: const navigation = useNavigation(); gives the navigation object.
3 Match the concept to its role
| Term | Meaning |
|---|---|
useNavigation |
Gives the navigation object |
toggleDrawer |
Opens/closes |
openDrawer |
Only opens |
closeDrawer |
Only closes |