Installation Installation
npm install @react-navigation/drawer
![Add Drawer Navigation 1 Add Drawer Navigation 1](https://maheshwaghmare.com/wp-content/uploads/2020/09/react-navigation-drawer-installation-1024x289.png)
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
![Add Drawer Navigation 2 Add Drawer Navigation 2](https://maheshwaghmare.com/wp-content/uploads/2020/09/react-navigation-expo-dependencies.png)
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;