React Native
Summary - Drawer navigation
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.
Exercise 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").
Show example 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>
);
}
Exercise 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.
Show example 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>
);
}
Test yourself
-
Which options field is used to add an icon to a Drawer.Screen?
<Drawer.Screen options={{ /* ... */ }} />
- tabBarIcon
- drawerIcon
- icon
- menuIcon
Show answer
drawerIcon — drawerIcon sets the icon of the item in the Drawer menu.
-
Open/close the Drawer
navigation.____();
Show answer
navigation.toggleDrawer();
-
Match the concept to its role
- Drawer
- Side menu
- drawerIcon
- Item icon
- toggleDrawer
- Opens/closes
- useNavigation
- Navigation object
Next lesson: Mount
