Summary - Drawer navigation
- React Native course
- Intermediate
- Lesson 58/116
- 5 min
Combine Drawer, items and nested to write a menu app.
Summary - Drawer navigation
In this group you learned the Drawer navigator, createDrawerNavigator, drawer items, the drawer toggle and nested navigation. The Drawer is a menu that opens from the side; each item is a Drawer.Screen. You add icons with drawerIcon and labels with drawerLabel.
With useNavigation you open and close the menu through navigation.toggleDrawer(). With nested navigation you use the Drawer and the Stack together. Now you will combine all these pieces into a menu app. The Drawer will have 3 sections; each section will have a Stack; each section will have an icon. This builds the navigation backbone of a real app. You will move step by step and bring everything you learned together.
Practice Write a 3-section Drawer app
Write an App component. Import createDrawerNavigator and assign to Drawer. Import Ionicons from @expo/vector-icons. Write three simple components: HomeScreen, ProfileScreen, SettingsScreen (each returns a Text). In the App component put three Drawer.Screen entries inside <Drawer.Navigator>. Add options={{ drawerIcon: ({ color, size }) => <Ionicons name="..." color={color} size={size} /> }} to each (Home: "home", Profile: "person", Settings: "settings").
Starter code
// Import the drawer navigator and the icon set; assign to Drawer
// Import Text from react-native
// Write Home, Profile, Settings screens
// Write the App component; put three Drawer.Screen; add an icon to eachSample solution
import { createDrawerNavigator } from "@react-navigation/drawer";
import { Ionicons } from "@expo/vector-icons";
import { Text } from "react-native";
const Drawer = createDrawerNavigator();
function HomeScreen() { return <Text>Home</Text>; }
function ProfileScreen() { return <Text>Profile</Text>; }
function SettingsScreen() { return <Text>Settings</Text>; }
function App() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeScreen} options={{ drawerIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> }} />
<Drawer.Screen name="Profile" component={ProfileScreen} options={{ drawerIcon: ({ color, size }) => <Ionicons name="person" color={color} size={size} /> }} />
<Drawer.Screen name="Settings" component={SettingsScreen} options={{ drawerIcon: ({ color, size }) => <Ionicons name="settings" color={color} size={size} /> }} />
</Drawer.Navigator>
);
}Practice Add a toggle button to the Drawer
Extend the 3-section app from the previous lesson. Add useNavigation inside HomeScreen; write const navigation = useNavigation();. Add <Button title="Menu" onPress={() => navigation.toggleDrawer()} />. Import useNavigation from @react-navigation/native.
Starter code
// Write the previous 3-section app
// Import the navigation hook
// Inside HomeScreen add a hook call and a toggle buttonSample solution
import { createDrawerNavigator } from "@react-navigation/drawer";
import { useNavigation } from "@react-navigation/native";
import { Ionicons } from "@expo/vector-icons";
import { Button, Text } from "react-native";
const Drawer = createDrawerNavigator();
function HomeScreen() {
const navigation = useNavigation();
return (
<>
<Text>Home</Text>
<Button title="Menu" onPress={() => navigation.toggleDrawer()} />
</>
);
}
function ProfileScreen() { return <Text>Profile</Text>; }
function SettingsScreen() { return <Text>Settings</Text>; }
function App() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeScreen} options={{ drawerIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> }} />
<Drawer.Screen name="Profile" component={ProfileScreen} options={{ drawerIcon: ({ color, size }) => <Ionicons name="person" color={color} size={size} /> }} />
<Drawer.Screen name="Settings" component={SettingsScreen} options={{ drawerIcon: ({ color, size }) => <Ionicons name="settings" color={color} size={size} /> }} />
</Drawer.Navigator>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which options field is used to add an icon to a Drawer.Screen?
<Drawer.Screen options={{ /* ... */ }} />- tabBarIcon
- drawerIcon Correct answer
- icon
- menuIcon
Explanation: drawerIcon sets the icon of the item in the Drawer menu.
2 Open/close the Drawer
navigation.____();navigation.toggleDrawer();Explanation: navigation.toggleDrawer() opens or closes the Drawer.
3 Match the concept to its role
| Term | Meaning |
|---|---|
Drawer |
Side menu |
drawerIcon |
Item icon |
toggleDrawer |
Opens/closes |
useNavigation |
Navigation object |