Drawer items
- React Native course
- Intermediate
- Lesson 55/116
- 5 min
Learn drawer items and customization.
Drawer items
Each item in the Drawer menu is defined by a Drawer.Screen. The item's label comes from the name prop. To customize you add title, drawerLabel or drawerIcon to the options prop.
Example: <Drawer.Screen name="Home" component={HomeScreen} options={{ title: "Home", drawerIcon: ... }} />. Here title sets the menu label. drawerLabel also customizes the label but only for the Drawer menu; it does not affect the header bar. drawerIcon puts an icon next to the menu item. These customizations make the menu visual and clear. Adding subheadings in the Drawer (such as "Account", "App") is also common; this is done with drawerContent. Drawer items are the main way the user navigates the app.
Practice Add icons to Drawer items
Import createDrawerNavigator as before and assign to Drawer. Import Ionicons from @expo/vector-icons. HomeScreen and SettingsScreen should be simple components. In the App component, add drawerIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> to each Drawer.Screen's options (use name="settings" for Settings).
Starter code
// Import the drawer navigator and the icon set; assign to Drawer
// Write HomeScreen and SettingsScreen
// Write the App component; add an icon-drawing field to each Drawer.Screen's optionsSample 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 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="Settings" component={SettingsScreen} options={{ drawerIcon: ({ color, size }) => <Ionicons name="settings" color={color} size={size} /> }} />
</Drawer.Navigator>
);
}Custom menu with drawerContent
To fully customize the Drawer menu you use the drawerContent prop. This prop takes a component to render instead of the default menu. This way you add custom sections to the menu: header, user info, submenus and so on.
Example: <Drawer.Navigator drawerContent={(props) => <CustomDrawer {...props} />}>. Here CustomDrawer is a component you write; through props you reach the items in the list from the Drawer and the navigation functions. This pattern is common in professional apps. Use it to add a user name and avatar at the top, a logout button at the bottom and similar extra sections. This customization offers more than the default menu; it produces a menu that reflects your brand.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match the concept to its role
| Term | Meaning |
|---|---|
title |
Sets the label |
drawerLabel |
Menu label only |
drawerIcon |
Menu icon |
options |
Customization |
2 What is drawerLabel used for?
options={{ drawerLabel: "Ana Sayfa" }}- To change the header bar
- To add an icon
- Only to change the label in the Drawer menu Correct answer
- To change the color
Explanation: drawerLabel changes only the label in the Drawer menu.
3 Set the menu label
options={{ title: "____", drawerIcon: ... }}options={{ title: "Ana Sayfa", drawerIcon: ... }}Explanation: title: "Home" sets the menu label.