To modify the document for using the Expo Router instead of traditional React Navigation, we'll adjust the setup to leverage Expo Router's file-based routing system. Expo Router simplifies navigation by automatically creating routes based on your file structure.

Chapter 12: Expo Router: Nested Navigation

1. Introduction to Different Expo Router Nested Navigation

Details: Expo Router enables nested navigation through its file-based routing system. In Expo Router, nested navigators are managed by organizing your file structure in a way that reflects the hierarchy of your routes. This approach allows for more intuitive and manageable navigation flows, such as nesting stack navigators inside tab or drawer navigators, all defined by your directory structure.

Key Concepts:

File-Based Routing: Routes are automatically generated based on the file structure in the app directory.
Layouts: Layout files act as parent navigators, such as stack or tab navigators, for nested screens.
Nested Navigation: Achieved by placing directories or files within other directories to represent nested navigators.

Examples:

A bottom tab navigator might be set up by creating a tabs.js file that contains the main tabs, and placing each tab's screens in their respective directories.
Nested stack navigation could be implemented by having a stack layout that includes child screens or other navigators within a subdirectory.

2. Setting Up Different Expo Router Nested Navigation

Example 1: Stack Navigator Inside a Tab Navigator

Install Expo Router: Ensure you have Expo Router set up in your project:
```
npx expo install expo-router
```

File Structure: Organize your files to reflect the nested navigation. Here’s an example structure:

app/
├── _layout.js       // Root layout for the whole app (can be a stack or drawer)
├── tabs/
│   ├── _layout.js   // Tab navigator layout
│   ├── home.js      // Home screen within the tab
│   └── settings.js  // Settings screen within the tab
├── details.js       // Details screen in stack

Create the Root Layout: In app/_layout.js, define the root layout as a stack navigator:

import { Stack } from "expo-router";

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "Home" }} />
      <Stack.Screen name="details" options={{ title: "Details" }} />
    </Stack>
  );
}

Create the Tab Layout: In app/tabs/_layout.js, define the tab navigator:

import { Tabs } from "expo-router";

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="home" options={{ title: "Home" }} />
      <Tabs.Screen name="settings" options={{ title: "Settings" }} />
    </Tabs>
  );
}

Link Screens to the Layouts: The home.js and settings.js files under app/tabs/ automatically become screens within the tab navigator. The details.js file under app/ is part of the stack navigator.

Example 2: Drawer Navigator with Stack and Tab Navigators

File Structure: Set up a structure that reflects the drawer navigation containing both stack and tab navigators:

app/
├── _layout.js        // Root layout with drawer navigator
├── tabs/
│   ├── _layout.js    // Tab navigator layout
│   ├── home.js       // Home screen in tab
│   └── settings.js   // Settings screen in tab
├── profile.js        // Profile screen in drawer
└── details.js        // Details screen in stack

Create the Drawer Layout: In app/_layout.js, define the drawer navigator:

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

export default function DrawerLayout() {
  return (
    <Drawer>
      <Drawer.Screen name="tabs" options={{ title: "Tabs" }} />
      <Drawer.Screen name="profile" options={{ title: "Profile" }} />
    </Drawer>
  );
}

Tab and Stack Layouts: You can use the previously defined app/tabs/_layout.js for tab navigation. The details.js file under app/ will be handled by the stack navigator as defined in app/_layout.js.

3. All Customizing Options of Different Nested Navigation

Customizing Expo Router Navigation: Customization in Expo Router is done primarily through modifying the layout files (_layout.js) and individual screen options.

Customizing Tab Bar:

import { Tabs } from "expo-router";

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: "#e91e63",
        tabBarStyle: { backgroundColor: "#fff" },
      }}
    >
      <Tabs.Screen name="home" options={{ tabBarIcon: "home" }} />
      <Tabs.Screen name="settings" options={{ tabBarIcon: "settings" }} />
    </Tabs>
  );
}

Customizing Drawer Navigation:

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

export default function DrawerLayout() {
  return (
    <Drawer
      screenOptions={{
        drawerPosition: "left",
        drawerStyle: { backgroundColor: "#ccc" },
      }}
    >
      <Drawer.Screen name="tabs" options={{ title: "Tabs" }} />
      <Drawer.Screen name="profile" />
    </Drawer>
  );
}

Stack Screen Options: Customize headers or animations for stack screens:

import { Stack } from "expo-router";

export default function Layout() {
  return (
    <Stack
      screenOptions={{
        headerStyle: { backgroundColor: "#f4511e" },
        headerTintColor: "#fff",
        headerTitleStyle: { fontWeight: "bold" },
      }}
    >
      <Stack.Screen name="index" options={{ title: "Home" }} />
      <Stack.Screen name="details" options={{ title: "Details" }} />
    </Stack>
  );
}

Summary:

This chapter covers nested navigation using Expo Router's file-based routing system. By organizing your file structure to match your navigation hierarchy, you can easily manage and customize complex navigation flows in your React Native apps. Expo Router simplifies the process and provides a more declarative way to handle navigation compared to traditional methods.