Drawer Navigation is a popular navigation pattern in mobile applications. It provides a side menu that can be opened from the edge of the screen. The menu contains links to different screens or sections of the application.
For example, an education application can use a drawer containing:
Home
Courses
Assignments
Profile
Settings
Logout@react-navigation/drawer package.
Drawer Navigation provides a side panel that contains navigation options.
┌──────────────────┐
│ Home │
│ Courses │
│ Profile │
│ Settings │
│ Logout │
└──────────────────┘The drawer can normally be opened and closed by the user.
Drawer navigation is useful when an application contains several navigation options that do not all need to remain visible on the main screen.
Install the React Navigation Drawer package using:
npm install @react-navigation/drawerThe exact additional dependencies depend on the project's React Native or Expo setup.
import {
NavigationContainer
} from '@react-navigation/native';The NavigationContainer contains the application's navigation tree.
import {
createDrawerNavigator
} from '@react-navigation/drawer';This function is used to create a Drawer Navigator.
const Drawer =
createDrawerNavigator();The Drawer object provides the components needed to create the drawer navigation structure.
<Drawer.Navigator>
{/* Drawer screens */}
</Drawer.Navigator>The Drawer.Navigator contains the screens that will appear as drawer menu options.
<Drawer.Screen
name="Home"
component={HomeScreen}
/>Drawer.Screen registers a screen as an item in the drawer.
<Drawer.Navigator>
<Drawer.Screen
name="Home"
component={HomeScreen}
/>
<Drawer.Screen
name="Courses"
component={CoursesScreen}
/>
<Drawer.Screen
name="Profile"
component={ProfileScreen}
/>
</Drawer.Navigator>The drawer now contains three navigation options.
import React from 'react';
import {
View,
Text
} from 'react-native';
export default function HomeScreen() {
return (
<View>
<Text>
Home Screen
</Text>
</View>
);
}This component can be registered in the drawer.
import React from 'react';
import {
View,
Text
} from 'react-native';
export default function CoursesScreen() {
return (
<View>
<Text>
Courses Screen
</Text>
</View>
);
}This screen can be opened from the drawer.
import React from 'react';
import {
View,
Text
} from 'react-native';
export default function ProfileScreen() {
return (
<View>
<Text>
Profile Screen
</Text>
</View>
);
}The Profile screen can also be registered in the drawer.
const Drawer =
createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen
name="Home"
component={HomeScreen}
/>
<Drawer.Screen
name="Courses"
component={CoursesScreen}
/>
<Drawer.Screen
name="Profile"
component={ProfileScreen}
/>
</Drawer.Navigator>
</NavigationContainer>
);
}A drawer can be opened using the navigation object's drawer methods.
navigation.openDrawer();This can be called from a button or another interaction.
The drawer can be closed programmatically using:
navigation.closeDrawer();This can be useful when creating custom drawer interactions.
The drawer can also be toggled between open and closed states.
navigation.toggleDrawer();If the drawer is closed, it opens. If it is open, it closes.
The drawer label can be customized with the
drawerLabel option.
<Drawer.Screen
name="Courses"
component={CoursesScreen}
options={{
drawerLabel: 'My Courses'
}}
/>
The route name remains Courses, while the drawer displays
"My Courses".
Icons can be configured with the drawerIcon option.
<Drawer.Screen
name="Home"
component={HomeScreen}
options={{
drawerIcon: ({
focused,
color,
size
}) => (
<Text>
🏠
</Text>
)
}}
/>In a production application, an icon library can be used instead of an emoji.
The selected drawer item and unselected drawer items can have different colors.
<Drawer.Navigator
screenOptions={{
drawerActiveTintColor: 'blue',
drawerInactiveTintColor: 'gray'
}}
>This helps users identify the current section.
The drawer can be configured to open from a particular side.
<Drawer.Navigator
screenOptions={{
drawerPosition: 'left'
}}
>The available configuration depends on the navigation version and platform behavior.
The drawer width can be customized using screen options.
<Drawer.Navigator
screenOptions={{
drawerStyle: {
width: 280
}
}}
>This allows the drawer to have a suitable width for the application design.
React Navigation allows developers to create custom drawer content.
<Drawer.Navigator
drawerContent={
props => (
<CustomDrawerContent
{...props}
/>
)
}
>Custom drawer content can be useful when the default drawer design does not provide enough control.
A custom drawer can display information such as:
Profile
----------------
Rahul Kumar
rahul@example.com
----------------
Home
Courses
Profile
Settings
LogoutDrawer navigation can be combined with Stack Navigation.
Drawer
|
├── Home Stack
│ ├── Home
│ └── Details
│
├── Courses
│
└── ProfileThis structure is useful when a drawer contains main sections and each section has its own stack of screens.
Drawer navigation is useful for applications with many secondary or main navigation options.
import React from 'react';
import {
View,
Text
} from 'react-native';
import {
NavigationContainer
} from '@react-navigation/native';
import {
createDrawerNavigator
} from '@react-navigation/drawer';
const Drawer =
createDrawerNavigator();
function HomeScreen() {
return (
<View>
<Text>
Home Screen
</Text>
</View>
);
}
function CoursesScreen() {
return (
<View>
<Text>
Courses Screen
</Text>
</View>
);
}
function ProfileScreen() {
return (
<View>
<Text>
Profile Screen
</Text>
</View>
);
}
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator
initialRouteName="Home"
screenOptions={{
drawerActiveTintColor:
'blue',
drawerInactiveTintColor:
'gray'
}}
>
<Drawer.Screen
name="Home"
component={HomeScreen}
options={{
drawerLabel: 'Home'
}}
/>
<Drawer.Screen
name="Courses"
component={CoursesScreen}
options={{
drawerLabel: 'My Courses'
}}
/>
<Drawer.Screen
name="Profile"
component={ProfileScreen}
options={{
drawerLabel: 'My Profile'
}}
/>
</Drawer.Navigator>
</NavigationContainer>
);
}| Property / Method | Purpose |
|---|---|
| createDrawerNavigator() | Creates a Drawer Navigator |
| Drawer.Navigator | Contains drawer screens |
| Drawer.Screen | Registers a screen in the drawer |
| openDrawer() | Opens the drawer |
| closeDrawer() | Closes the drawer |
| toggleDrawer() | Toggles the drawer state |
| drawerLabel | Customizes the drawer label |
| drawerIcon | Provides an icon for a drawer item |
| drawerActiveTintColor | Sets the active drawer item color |
| drawerInactiveTintColor | Sets the inactive drawer item color |
| drawerContent | Allows custom drawer content |
Create React Native Project
↓
Install React Navigation
↓
Install Drawer Navigator
↓
Create Screen Components
↓
Create NavigationContainer
↓
Create Drawer Navigator
↓
Register Drawer Screens
↓
Set Drawer Labels
↓
Add Icons
↓
Configure Active/Inactive States
↓
Add Custom Drawer Content if Required
↓
Combine with Stack Navigation if Required
↓
Test All Drawer OptionsDrawer Navigation provides a useful side menu for applications with multiple sections. It can be combined with Stack Navigation and other navigation patterns to create a complete mobile application navigation system.
@react-navigation/drawer provides the drawer navigator.createDrawerNavigator() creates a drawer navigator.Drawer.Navigator contains drawer screens.Drawer.Screen registers individual drawer items.openDrawer() opens the drawer programmatically.closeDrawer() closes the drawer.toggleDrawer() toggles the drawer.drawerLabel customizes drawer labels.drawerIcon can provide icons.Question: Which function is used to create a Drawer Navigator in React Navigation?