Skip to main content
Version: 5.x

Drawer navigation

Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens.

Before continuing, first install @react-navigation/drawer:

npm install @react-navigation/drawer@^5.x

Minimal example of drawer-based navigation

To use this drawer navigator, import it from @react-navigation/drawer: (swipe right to open)

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
onPress={() => navigation.navigate('Notifications')}
title="Go to notifications"

function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.goBack()} title="Go back home" />

const Drawer = createDrawerNavigator();

export default function App() {
return (
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />

Opening and closing drawer

To open and close drawer, use the following helpers:


If you would like to toggle the drawer you call the following:


Each of these functions, behind the scenes, are simply dispatching actions:


If you would like to determine if drawer is open or closed, you can do the following:

import { useIsDrawerOpen } from '@react-navigation/drawer';

// ...

const isDrawerOpen = useIsDrawerOpen();