React-native-auto-route NPM

react-native-auto-route

React Native Auto Route is a file-based router for React Native CLI. Built on top of Expo Router and React Navigation

GitHub license

Check out our documentation page for more information

intro

Installation

yarn add react-native-auto-route

Peer Dependencies

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. Edit MainActivity.kt or MainActivity.java file which is located under android/app/src/main/java/<your package name>/.

Add the highlighted code to the body of MainActivity class:

with Kotlin:

import android.os.Bundle;

class MainActivity: ReactActivity() {
  // ...
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
  }
  // ...
}

with Java:

import android.os.Bundle;

public class MainActivity extends ReactActivity {
  // ...
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
  // ...
}

Add Auto Route plugin

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

module.exports = {
  presets: [
    ... // don't add it here :)
  ],
  plugins: [
    ...
    ['react-native-auto-route/plugin'],
  ],
};

Enable require.context

Add unstable_allowRequireContext transformer option to your metro.config.js

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: {
    unstable_allowRequireContext: true,
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Clear Metro bundler cache (recommended)

yarn start --reset-cache

Usage

import RouterRoot from 'react-native-auto-route';

<RouterRoot />

Basic usage

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

Example

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

export default function Home() {
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
}

Dynamic routes

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].tsx matches 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.

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

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