@react-navigation/drawer

What is @react-navigation/drawer?

@react-navigation/drawer is a package for React Native that provides a customizable drawer navigator. It allows you to create a side menu that can be swiped in from the edge of the screen, providing a convenient way to navigate between different screens in your app.

What are @react-navigation/drawer's main functionalities?

Basic Drawer Navigation

This code demonstrates how to set up a basic drawer navigation with two screens: Home and Profile. The drawer can be swiped in from the edge of the screen to navigate between these screens.

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

const Drawer = createDrawerNavigator();

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

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

Custom Drawer Content

This code demonstrates how to create a custom drawer content component. The custom drawer includes a button to close the drawer, in addition to the default drawer items.

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const Drawer = createDrawerNavigator();

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <Button title="Close Drawer" onPress={() => props.navigation.closeDrawer()} />
    </DrawerContentScrollView>
  );
}

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

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

Drawer with Custom Styles

This code demonstrates how to apply custom styles to the drawer navigator. The drawer has a custom background color and width, and the drawer items have custom styles as well.

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

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator
      initialRouteName="Home"
      drawerStyle={{
        backgroundColor: '#c6cbef',
        width: 240,
      }}
      drawerContentOptions={{
        activeTintColor: '#e91e63',
        itemStyle: { marginVertical: 5 },
      }}
    >
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

Other packages similar to @react-navigation/drawer

react-native-drawer

react-native-drawer is another package for creating a drawer navigation in React Native applications. It provides a highly customizable drawer component that can be used to create side menus. Compared to @react-navigation/drawer, react-native-drawer offers more flexibility in terms of customization but requires more manual setup and configuration.

react-native-side-menu

react-native-side-menu is a simple and customizable side menu component for React Native. It allows you to create a side menu that can be swiped in from the edge of the screen. While it is easier to set up compared to @react-navigation/drawer, it lacks some of the advanced features and integrations provided by @react-navigation/drawer.

react-navigation

react-navigation is a popular navigation library for React Native that provides a variety of navigators, including stack, tab, and drawer navigators. While @react-navigation/drawer is a specific package for drawer navigation, react-navigation offers a more comprehensive solution for handling different types of navigation in a React Native app.

README

@react-navigation/drawer

Bottom tab navigator for React Navigation following iOS design guidelines.

Installation

Open a Terminal in your project's folder and run,

yarn add @react-navigation/core @react-navigation/drawer

Now we need to install react-native-gesture-handler, react-native-reanimated and react-native-safe-area-context.

If you are using Expo, to ensure that you get the compatible versions of the libraries, run:

expo install react-native-gesture-handler react-native-reanimated react-native-safe-area-context

If you are not using Expo, run the following:

yarn add react-native-reanimated react-native-gesture-handler react-native-safe-area-context

If you are using Expo, you are done. Otherwise, continue to the next steps.

To complete the linking on iOS, make sure you have Cocoapods installed. Then run:

cd ios
pod install
cd ..

IMPORTANT: There are additional steps required for react-native-gesture-handler on Android after linking (for all React Native versions). Check the this guide to complete the installation.

Usage

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

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="home" component={Home} options={{ title: 'Home' }} />
      <Drawer.Screen name="feed" component={Feed} options={{ title: 'Feed' }} />
      <Drawer.Screen
        name="profile"
        component={Profile}
        options={{ title: 'Profile' }}
      />
    </Drawer.Navigator>
  );
}