How to Use Drawer Navigator in React Native

Use @react-navigation/drawer to create a drawer navigator in React Native. Wrap your app in NavigationContainer, create a drawer navigator with createDrawerNavigator(), and define screens inside it to enable side menu navigation.

Syntax

The drawer navigator is created using createDrawerNavigator() from @react-navigation/drawer. You wrap your app in NavigationContainer and define screens inside the drawer navigator. Each screen becomes a menu item in the drawer.

• NavigationContainer: Root container for navigation state.
• createDrawerNavigator(): Creates the drawer navigator object.
• Drawer.Navigator: Component that holds drawer screens.
• Drawer.Screen: Defines each screen and its component.

javascript

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

const Drawer = createDrawerNavigator();

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

Output

App with a side drawer menu containing 'Home' and 'Settings' items that navigate to respective screens.

Example

This example shows a simple drawer navigator with two screens: Home and Profile. The drawer slides from the left and lets users switch screens by tapping menu items.

javascript

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

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button title="Open Drawer" onPress={() => navigation.openDrawer()} />
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

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

Output

App with a drawer menu containing 'Home' and 'Profile'. The Home screen has a button to open the drawer.

Common Pitfalls

Common mistakes when using drawer navigator include:

• Not wrapping the navigator inside NavigationContainer, which breaks navigation.
• Forgetting to install or link @react-navigation/drawer and its dependencies like react-native-gesture-handler.
• Not importing gesture handler at the app entry point, causing gesture issues.
• Using class components without proper hooks or navigation props.

Always follow installation steps carefully and test drawer gestures on a real device or emulator.

javascript

/* Wrong: Missing NavigationContainer */
import { createDrawerNavigator } from '@react-navigation/drawer';
import React from 'react';
import HomeScreen from './HomeScreen';

const Drawer = createDrawerNavigator();

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

/* Right: Wrap with NavigationContainer */
import { NavigationContainer } from '@react-navigation/native';

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

Quick Reference

Drawer Navigator Quick Tips:

• Install with npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated.
• Import gesture handler at the app root: import 'react-native-gesture-handler';.
• Wrap navigator in NavigationContainer.
• Use Drawer.Navigator and Drawer.Screen to define menu and screens.
• Use navigation.openDrawer() to open drawer programmatically.

Key Takeaways

Wrap your drawer navigator inside NavigationContainer to enable navigation state.

Use createDrawerNavigator from @react-navigation/drawer to create the drawer menu.

Define screens inside Drawer.Navigator to show them as drawer items.

Install and import react-native-gesture-handler properly to enable drawer gestures.

Use navigation.openDrawer() to open the drawer from code.