Drawer Navigator

Side Menu Navigation

Drawer navigation is the slide-out menu you see in many apps. Users swipe from the left edge of the screen (or tap a hamburger icon) to reveal a menu with navigation options. It's great for apps with many sections that don't fit in bottom tabs.

The drawer is particularly useful for settings, help, about pages, and other secondary navigation that doesn't need to be immediately visible.

Setting Up Drawer Navigation

First install the drawer package, then set up your navigator:

npm install @react-navigation/drawer
npx expo install react-native-gesture-handler react-native-reanimated

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

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24 }}>Home</Text>
    </View>
  );
}

function AboutScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24 }}>About</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="About" component={AboutScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default App;

The drawer works just like the other navigators. Users can swipe from the left to open it, or you can open it programmatically with navigation.openDrawer(). Each screen in the drawer gets a menu item automatically.

Custom Drawer Content

You can customize what appears inside the drawer with the drawerContent option. This lets you add headers, footers, custom items, or anything else you want in the menu.

function CustomDrawerContent(props) {
  return (
    <View style={{ flex: 1, paddingTop: 50, paddingHorizontal: 20 }}>
      <Text style={{ fontSize: 24, fontWeight: 'bold', marginBottom: 30 }}>
        My App
      </Text>
      {props.state.routes.map((route, index) => (
        <Text
          key={route.name}
          style={{ fontSize: 18, padding: 10, color: '#333' }}
          onPress={() => props.navigation.navigate(route.name)}
        >
          {route.name}
        </Text>
      ))}
    </View>
  );
}

<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
  <Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>

The drawerContent function receives props including the navigation state and a function to navigate. You can render whatever you want — user profile, settings toggles, custom links. This gives you complete control over the drawer's appearance.

Drawer Events

You can respond to drawer events like opening, closing, or item selection:

<Drawer.Screen
  name="Home"
  component={HomeScreen}
  listeners={{
    drawerOpen: () => console.log('Drawer opened'),
    drawerClose: () => console.log('Drawer closed'),
  }}
/>

The drawerOpen and drawerClose events let you trigger actions when the drawer state changes. This is useful for analytics, animations, or updating content based on drawer visibility.