File-system based router in React Native CLI with react-native-auto-route

Introduction

React-native-auto-route is a file-based router for React Native CLI. It is build on top of React Navigation and Expo Router

It allow you to manage your routes in a simple and intuitive way. When a file is added, removed or renamed, the router is automatically updated. Every screen in your app is automatically deep linkable.

Installation

Step 1: Install “react-native-auto-route”:

yarn add react-native-auto-route

Step 2: Installing peer dependencies:

If you already have these libraries installed and at the latest version, you can skip this step.

yarn add react-native-screens react-native-safe-area-context

If you’re on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.

npx pod-install ios

react-native-screens package requires one additional configuration step to properly work on Android devices.
https://github.com/software-mansion/react-native-screens#android

Step 3: Add Auto Route plugin

Add react-native-auto-route/plugin plugin to your babel.config.js.

module.exports = {
  presets: [
    //…
  ],
  plugins: [
    //…
    "react-native-auto-route/plugin",
  ],
};

Step 4: Update metro.config.js

Enable unstable_allowRequireContext in your metro.config.js file.

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    // Add this line
    unstable_allowRequireContext: true,
  },
};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Step 5: Update your App.tsx file

Import react-native-auto-route and use the RouterRoot component. It’s similar to NavigationContainer from react-navigation.

import React from "react";
import RouterRoot from "react-native-auto-route";
const App = () => {
  return <RouterRoot />;
};
export default App;

Step 6: Create screens

When a file is created in the screens directory (default is: app), it will be automatically added to the routes. For example, the following files will create the following routes:

- app/index.tsx matches “/”
- app/home.tsx matches “/home”
- app/settings/index.tsx matches “/settings”
- app/[user].tsx matches dynamic paths like “/userId1” or “/userId2”
- app/(group)/tab1.tsx matches “/tab1”

Supported extensions: “.tsx”, “.ts”, “.jsx”, “.js”

You can create dynamic routes by using square brackets in the file name. For example, the following files will create the following routes:

- app/[user].tsx matches dynamic paths like “/userId1”
- app/[user]/[post].tsx matches dynamic paths like “/userId1/postId1”
- app/detail/[postId].tsx matches dynamic paths like “/detail/postId1”
- app/detail/[…postId].tsxmatches dynamic paths like “/detail/postId1/edit”

Routes with higher specificity will be matched before a dynamic route. For example, /detail/post will match detail/post.tsx before detail/[id].tsx.

Multiple slugs can be matched in a single route by using the rest syntax (…). For example, app/detail/[…postId].tsx matches /detail/postId1/edit.

You can get params from the route by using the useParams hook.

Example: app/[user]/[post].tsx

import React from 'react';
import { Text, View } from 'react-native';
import { useParams } from 'react-native-auto-route';

export default function UserPost() {
  const params = useParams();
  return (
    <View>
       
      <Text>
        Detail: {params.user} - {params.post}
      </Text>
       
    </View>
  );
}

References

- Documentation: https://howljs.github.io/react-native-auto-route/docs/getting-started/
- Github: https://github.com/howljs/react-native-auto-route
- Expo Router: https://docs.expo.dev/router/introduction/
- React navigation: https://reactnavigation.org/docs/getting-started/