Drawer

Drawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures.

Installation

npm

npm install @react-navigation/drawer

Yarn

yarn add @react-navigation/drawer

pnpm

pnpm add @react-navigation/drawer

Then, you need to install and configure the libraries that are required by the drawer navigator:

1. First, install react-native-gesture-handler and react-native-reanimated.

npm

npm install react-native-gesture-handler react-native-reanimated

Yarn

yarn add react-native-gesture-handler react-native-reanimated

pnpm

pnpm add react-native-gesture-handler react-native-reanimated

2. Update babel.config.js to include the reanimated plugin:

babel.config.js

module.exports = {
  presets: [
      ... 
    ],
    plugins: [
      ... 
      'react-native-reanimated/plugin',
    ],
};

Create drawer navigator

navigator/drawer.tsx

import {
  createDrawerNavigator,
  type DrawerNavigationEventMap,
  type DrawerNavigationOptions,
} from '@react-navigation/drawer';
import type {
  DrawerNavigationState,
  ParamListBase,
} from '@react-navigation/native';
import { createNavigator } from 'react-native-auto-route';

const DrawerNavigator = createDrawerNavigator().Navigator;

export const Drawer = createNavigator<
  DrawerNavigationState<ParamListBase>,
  DrawerNavigationOptions,
  DrawerNavigationEventMap,
  Omit<React.ComponentProps<typeof DrawerNavigator>, 'id' | 'children'> & {
    children?: React.ReactNode;
  }
>(DrawerNavigator);

export default Drawer;

Example usage:

📂 app
┃ ┣ 📜 _layout.tsx
┃ ┣ 📂 (drawer)
┃ ┃ ┣ 📜 _layout.tsx
┃ ┃ ┣ 📜 home.tsx
┃ ┃ ┣ 📜 settings.tsx

_layout

app/_layout.tsx

import React from 'react';
import { Stack } from 'react-native-auto-route';

export default function Layout() {
  return <Stack initialRouteName="(drawer)" />;
}

(drawer)/_layout

app/(drawer)/_layout.tsx

import React from 'react';
import Drawer from '../../src/navigator/drawer';

const DrawerLayout = () => {
  return (
    <Drawer>
      {/** The screen will be included automatically. Just need declare if you need to add custom configuration */}
      <Drawer.Screen
        name="home" // name prop is directory name or filename
        options={{
          // https://reactnavigation.org/docs/stack-navigator#options
          title: 'Home',
        }}
      />
    </Drawer>
  );
};

export default DrawerLayout;

(drawer)/home

app/(drawer)/home.tsx

import { View, Text } from 'react-native';
import React from 'react';

const Home = () => {
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
};

export default Home;

(drawer)/settings

app/(drawer)/settings.tsx

import { View, Text } from 'react-native';
import React from 'react';

const Settings = () => {
  return (
    <View>
      <Text>Settings</Text>
    </View>
  );
};

export default Profile;