@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

Drawer navigator for React Navigation following Material Design guidelines.

Installation instructions and documentation can be found on the React Navigation website.