Drawer

A navigation drawer is a common pattern in mobile apps, it allows users to swipe open a menu from a side of their screen to expose navigation options. This menu is also typically toggleable through a button in the app's header.

Installation

In SDK 56 and later, the drawer navigator is bundled in expo-router and uses react-native-drawer-layout under the hood.

On Android and iOS, the drawer requires react-native-reanimated and react-native-worklets to drive its animations. On web, animation is handled by CSS.

To use the drawer navigator, install these dependencies if you do not have them already:

bun expo install react-native-reanimated react-native-worklets react-native-gesture-handler

Usage

Now you can use the Drawer layout to create a drawer navigator.

import { Drawer } from 'expo-router/drawer';

export default function Layout() {
  return <Drawer />;
}

To edit the drawer navigation menu labels, titles and screen options specific screens are required as follows:

import { Drawer } from 'expo-router/drawer';

export default function Layout() {
  return (
    <Drawer>
      <Drawer.Screen
        name="index" // This is the name of the page and must match the url from root
        options={{
          drawerLabel: 'Home',
          title: 'overview',
        }}
      />
      <Drawer.Screen
        name="user/[id]" // This is the name of the page and must match the url from root
        options={{
          drawerLabel: 'User',
          title: 'overview',
        }}
      />
    </Drawer>
  );
}

Sources

The original Expo docs for this page:

• Drawer (source-of-truth/router/advanced/drawer.md)