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" />
</View>
)
const NotificationsScreen = ({ navigation }) => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.goBack()} title="Go back home" />
</View>
)
const Drawer = createDrawerNavigator()
const App = () => (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
)
export default App

Try this example on Snack

Payment#

Now you are on a stripped-down version of the site, after subscribing to Patreon, you will get full access to the training course, as well as access to our server's private channels in Discord.

Download our mobile application or get tested in our JavaScript telegram bot, and also subscribe to our news.

Become a Patron!

Sumerian school

Contributors โœจ#

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev

๐Ÿ“–๐Ÿ’ฒ

Become a Patron!