Drawer Navigator in React Native

Introduction

A Drawer Navigator lets users open a side menu to switch between screens easily. It helps organize app sections in one place.

When your app has multiple main screens to switch between.

When you want a menu that slides from the side for navigation.

When you want to save screen space by hiding navigation options.

When you want a familiar navigation style like many popular apps use.

Syntax

React Native

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

const Drawer = createDrawerNavigator();

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

Wrap your drawer navigator inside NavigationContainer to manage navigation state.

Each Drawer.Screen defines a screen accessible from the drawer menu.

Examples

Basic drawer with two screens: Home and Settings.

React Native

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

const Drawer = createDrawerNavigator();

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

Set the initial screen shown when the app starts using initialRouteName.

React Native

function MyDrawer() {
  return (
    <Drawer.Navigator initialRouteName="Profile">
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
  );
}

Change drawer to open from the right side using drawerPosition.

React Native

function MyDrawer() {
  return (
    <Drawer.Navigator screenOptions={{ drawerPosition: 'right' }}>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
  );
}

Sample App

This app has a drawer menu with two screens: Home and Profile. On the Home screen, a button opens the drawer menu.

React Native

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>
  );
}

Important Notes

You must install @react-navigation/native and @react-navigation/drawer packages to use Drawer Navigator.

Drawer navigation works best for apps with 3-5 main screens to avoid clutter.

Remember to wrap your navigator in NavigationContainer once at the root of your app.

Summary

Drawer Navigator creates a side menu for easy screen switching.

Use Drawer.Screen to add screens to the drawer.

Wrap the drawer navigator inside NavigationContainer to manage navigation state.