React Native
Drawer items
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.
Exercise 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).
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 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.
Test yourself
-
Match the concept to its role
- title
- Sets the label
- drawerLabel
- Menu label only
- drawerIcon
- Menu icon
- options
- Customization
-
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
- To change the color
Show answer
Only to change the label in the Drawer menu — drawerLabel changes only the label in the Drawer menu.
-
Set the menu label
options={{ title: "____", drawerIcon: ... }}
Show answer
options={{ title: "Ana Sayfa", drawerIcon: ... }}
Next lesson: Drawer toggle
