createDrawerNavigator

Learn drawer navigation with createDrawerNavigator.

Using createDrawerNavigator

createDrawerNavigator is the factory function React Navigation provides for the Drawer. When called it returns a Drawer object that contains the Drawer.Navigator and Drawer.Screen components. Import: import { createDrawerNavigator } from "@react-navigation/drawer";.

Typical usage: const Drawer = createDrawerNavigator();. Then you write <Drawer.Navigator><Drawer.Screen name="Home" component={HomeScreen} /></Drawer.Navigator>. This structure is the backbone of side menu navigation. Drawer.Navigator is a container; the parent component that wraps all screens. Drawer.Screen defines a single screen. This split is the same across all React Navigation navigators: the Navigator + Screen pair. The Drawer, unlike Bottom Tabs, keeps the menu hidden; the user sees it only when they open it. This saves space for menus with many items.

Exercise Write a 2-screen Drawer navigator

Import createDrawerNavigator and assign to Drawer as in the previous lesson. Then write an App component. Return <Drawer.Navigator><Drawer.Screen name="Home" component={HomeScreen} /><Drawer.Screen name="Settings" component={SettingsScreen} /></Drawer.Navigator>. HomeScreen and SettingsScreen should be simple components (just return a Text).

Show example solution

import { createDrawerNavigator } from "@react-navigation/drawer";
import { Text } from "react-native";

const Drawer = createDrawerNavigator();

function HomeScreen() { return <Text>Home</Text>; }
function SettingsScreen() { return <Text>Settings</Text>; }

function App() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
}

Drawer customization

The Drawer.Navigator is customized with screenOptions or each Drawer.Screen's options prop. Common settings: drawerPosition (left or right), drawerType (slide, front, back), drawerActiveTintColor (selected item color).

Example: <Drawer.Navigator screenOptions={{ drawerPosition: "right" }}> opens the menu from the right. drawerType: "front" brings the menu above the screen; back pushes the screen behind. Color settings give a look that matches the brand identity. Adding a header at the top of the Drawer (user name, avatar) is also common; this is done with the drawerContent prop. In the next lessons we will learn drawer items and the open/close function. These customizations are ways to personalize the app.

Test yourself

Import createDrawerNavigator

import { ____ } from "@react-navigation/drawer";

Show answer

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

What is the role of Drawer.Navigator?
```
<Drawer.Navigator>...</Drawer.Navigator>
```
- Defines a single screen
- It is the container that wraps all screens
- Adds an icon
- Makes an API call
Show answer

It is the container that wraps all screens — Drawer.Navigator is the container that wraps all screens.
Match the concept to its role

createDrawerNavigator

Builds the Drawer object
Drawer.Navigator

Screen container
Drawer.Screen

Single screen
name

Screen name

Next lesson: Drawer items

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies