Skip to main content

Drawer navigator

A common navigation pattern is to use the Drawer on the left (sometimes right) side to navigate between screens.

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

npm install @react-navigation/drawer

A minimal example of Drawer based navigation

To use this Drawer, import it from @response-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'

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

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

const Drawer = createDrawerNavigator()

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

export default App

Try this example on Snack

Opening and Closing Drawer

Use the following helpers to open and close Drawer:


Try this example on Snack

If you want to switch Drawer, you call the following:


Try this example on Snack

Each of these functions behind the scenes simply dispatches actions:


Try this example on Snack

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

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

// ...

const isDrawerOpen = useIsDrawerOpen()

Done ✅

To see how well you learned this lesson, take the test in our school's mobile app on this topic or in Telegram bot.

Sumerian school

React Navigation

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dmitriy Vasilev


Become a Patron!