Chapter 8: File-Based Routing with Expo

1. Introduction to File-Based Routing

Details: File-based routing is a system where the routing structure of an app is defined by the file and folder structure of the project. It allows for an intuitive and organized way to manage navigation, especially in larger projects.

Key Concepts:

Automatic Routing: Routes are automatically generated based on the file structure.
Nested Routes: Directory structures represent nested routes, enabling complex navigation hierarchies.
Dynamic Routes: Dynamic segments in file names (e.g., [id].js) create dynamic routes, which can handle varying parameters.

Example: Consider the following file structure:

pages/
  ├─ index.js
  ├─ profile/
  │   ├─ index.js
  │   ├─ [id].js
  └─ settings.js

index.js maps to the root route (/).
profile/index.js maps to /profile.
profile/[id].js maps to dynamic routes like /profile/1, /profile/2, etc.
settings.js maps to /settings.

2. Setting Up Routing with Expo

Details: Expo provides a powerful and easy-to-use navigation system, often with the help of libraries like react-navigation.

Steps:

Install Required Packages:
- react-navigation: The core library for navigation.
- react-navigation-stack, react-navigation-tabs: For specific types of navigation like stack or tab navigation.
- react-native-screens, react-native-safe-area-context: For performance and safety.
Run the following command to install:
```
npm install @react-navigation/native @react-navigation/stack
```

Setup Navigation:

Create a navigation directory under src and a RootNavigator.js file.
Define the stack navigator and add your routes.

import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";
import HomeScreen from "../screens/HomeScreen";
import ProfileScreen from "../screens/ProfileScreen";

const Stack = createStackNavigator();

export default function RootNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

3. Defining Navigation Paths

Details: Navigation paths are defined through the name property in the Screen component within the stack navigator. These paths allow for easy navigation across the app.

Example:

<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />

To navigate between screens, you can use the navigation prop:

navigation.navigate("Profile");

4. Nested and Dynamic Routes

Details:

Nested Routes: Implement nested navigation by adding navigators within navigators. This is useful for creating complex navigation structures, such as a tab navigator inside a stack navigator.
Dynamic Routes: Utilize dynamic segments in file names to create routes that handle varying parameters.

Example:

<Stack.Screen name="Profile" component={ProfileScreen} />

Here, you can pass parameters:

navigation.navigate("Profile", { userId: 42 });

In ProfileScreen, access the parameter:

const { userId } = route.params;

Summary:

This chapter covers the fundamentals of setting up file-based routing in a React Native app using Expo. It includes automatic, nested, and dynamic routing, setting up the navigation, and defining and handling paths efficiently.