Chapter 11: Expo Router: Drawer Navigation

1. Introduction to Expo Router Drawer Navigator

Details: The Drawer Navigator is a navigation pattern that provides a side menu (drawer) that can be swiped or toggled open. This is a common navigation structure in mobile applications, allowing users to access different sections of the app easily. The Drawer Navigator is part of the react-navigation library and is fully supported by Expo.

Key Concepts:

Drawer Structure: A side menu that slides in from the left (by default) and displays links to different sections of the app.
Ease of Navigation: Allows users to access main sections of the app from anywhere within the app.
Customizable: The drawer can be customized with icons, styles, and more.

Example: A common use case for a Drawer Navigator is in apps with multiple main sections, like Home, Profile, Settings, etc.

2. Setting Up Expo Router Drawer Navigator

Details: To set up the Drawer Navigator in an Expo project, you'll need to install the necessary dependencies and configure the navigation structure.

Steps:

Install Required Packages: The Drawer Navigator is provided by the @react-navigation/drawer package. Install it along with its dependencies:
```
npm install @react-navigation/native @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated
```

Configure the Drawer Navigator: Create a navigation directory under src and add a DrawerNavigator.js file. In this file, you'll define your drawer navigation structure.

import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import HomeScreen from "../screens/HomeScreen";
import ProfileScreen from "../screens/ProfileScreen";
import SettingsScreen from "../screens/SettingsScreen";

const Drawer = createDrawerNavigator();

export default function DrawerNavigator() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Integrate into the App: To use the Drawer Navigator in your app, you need to import it in your root component (typically App.js).

import DrawerNavigator from "./src/navigation/DrawerNavigator";

export default function App() {
  return <DrawerNavigator />;
}

Handle Gesture Conflicts: Since the Drawer Navigator uses gestures to open and close, make sure that the react-native-gesture-handler and react-native-reanimated libraries are correctly set up, particularly if you're using other gesture-based components in your app.

3. All Customizing Options in Drawer Navigation

Details: The Drawer Navigator offers a wide range of customization options to match the app’s design and functionality requirements.

Customization Options:

Drawer Position:

Left (default) or Right:

<Drawer.Navigator drawerPosition="right">

Custom Drawer Content:

Replace the default drawer with a custom component to display user info, links, etc.

import CustomDrawerContent from '../components/CustomDrawerContent';

<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>

Drawer Style:

Modify the background color, width, etc.

<Drawer.Navigator
  drawerStyle={{
    backgroundColor: '#c6cbef',
    width: 240,
  }}>

Screen Options:

Customize individual screens within the drawer.

<Drawer.Screen
  name="Home"
  component={HomeScreen}
  options={{
    drawerLabel: "Home Screen",
    drawerIcon: () => <Icon name="home" size={24} />,
  }}
/>

Header and Title Customization:

Control the header shown at the top of each screen.

<Drawer.Screen
  name="Profile"
  component={ProfileScreen}
  options={{ headerTitle: "My Profile" }}
/>

Locking Drawer Gestures:
- Prevent the drawer from being opened with a swipe gesture.
- ```
<Drawer.Navigator drawerLockMode="locked-closed">
```
Drawer Type:
- Control the drawer's behavior (e.g., permanent, back, front, slide).
- ```
<Drawer.Navigator drawerType="slide">
```
Edge Width:
- Set how far from the edge the swipe to open should be detected.
- ```
<Drawer.Navigator edgeWidth={100}>
```

Example: Custom Drawer Content

import React from "react";
import { View, Text, Button } from "react-native";
import {
  DrawerContentScrollView,
  DrawerItemList,
} from "@react-navigation/drawer";

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <View style={{ padding: 20 }}>
        <Text>User Name</Text>
        <Button title="Sign Out" onPress={() => {}} />
      </View>
      <DrawerItemList {...props} />
    </DrawerContentScrollView>
  );
}

export default CustomDrawerContent;

Summary:

This chapter covers the implementation of Drawer Navigation in Expo, including the setup process, customization options, and examples of how to implement and customize the drawer to fit your app's design and navigation needs.