Skip to main content

Drawer navigation

To use the React Navigation drawer navigator with Expo Router, do the following:

Installation

Follow the installation guide for Drawer Navigator.

  • Install @react-navigation/drawer: npx expo install @react-navigation/drawer
  • Ensure react-native-reanimated is correctly configured in the babel.config.js file.
  • Changes to the babel.config.js require a clean babel cache to be applied: npx expo start --clear.

Setup

Contextualize the drawer navigator to support the Expo Router file convention:

./Drawer.tsx
import {
// Import the creation function
createDrawerNavigator,
// Import the types
DrawerNavigationOptions,
} from "@react-navigation/drawer";

import { withLayoutContext } from "expo-router";

const { Navigator } = createDrawerNavigator();

// This can be used like `<Drawer />`
export const Drawer = withLayoutContext<
DrawerNavigationOptions,
typeof Navigator
>(Navigator);

Usage

app/_layout.js
import { Drawer } from "../Drawer";

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

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

app/_layout.js
import { Drawer } from "../Drawer";

export default function RootLayout() {
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>
);
}