A "drawer" is the side-sliding navigation menu you know from the "hamburger" icon (☰) – common in apps with many, less frequently used menu items.

1. Description

@react-navigation/drawer provides createDrawerNavigator() – structurally identical to createBottomTabNavigator(), except the navigation appears from the side instead of the bottom, and by default can be opened with a swipe gesture from the screen edge.

2. Short example

const Drawer = createDrawerNavigator();

<Drawer.Navigator>
  <Drawer.Screen name="Home" component={HomeScreen} />
  <Drawer.Screen name="Settings" component={SettingsScreen} />
</Drawer.Navigator>

3. Complete project

npx create-expo-app drawer-navigation-demo
cd drawer-navigation-demo
npx expo install @react-navigation/native @react-navigation/drawer
npx expo install react-native-screens react-native-safe-area-context react-native-gesture-handler

import { View, Text, StyleSheet } from 'react-native';

function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Home screen – swipe from the left edge!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 },
  text: { fontSize: 18, textAlign: 'center' },
});

export default HomeScreen;

import { View, Text } from 'react-native';

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>⚙️ Settings</Text>
    </View>
  );
}

export default SettingsScreen;

import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

4. Explanation

• import 'react-native-gesture-handler'; – MUST be the very first line in App.js, before all other imports, or the drawer's swipe gestures won't work reliably on some platforms.
• initialRouteName="Home" – determines which screen is shown first on app start (without it, it would simply be the first-declared Drawer.Screen).
• The drawer opens by default via a swipe gesture from the left screen edge OR via an automatically shown hamburger button in the header.

5. Outputs