Add Drawer Navigation

#Installation Installation

npm install @react-navigation/drawer

Additional dependencies for Expo.

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Top ↑

#Example Example

import React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

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

const Drawer = createDrawerNavigator();

const About = () => {
    return (
        <View style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
        }}>
            <Text>About</Text>
        </View>
    )
}

const Home = () => {
    return (
        <View style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
        }}>
            <Text>Home</Text>
        </View>
    )
}

const App = () => {
    return (
        <NavigationContainer>
            <Drawer.Navigator initialRouteName="Home">
              <Drawer.Screen name="Home" component={Home} options={{ drawerLabel: 'Home' }} />
              <Drawer.Screen name="About" component={About} options={{ drawerLabel: 'About' }} />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

export default App;