@redshank/native-router

@redshank/native-router is a file-based router for React Native CLI. Built on top of Expo Router and React Navigation

Check out our documentation page for more information

Installation

1yarn add @redshank/native-router

Peer Dependencies

The dependencies for use React Navigation please continue with tutorial

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

optional dependencies:

1yarn add react-native-gesture-handler react-native-reanimated

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

1npx pod-install ios

React Native Screens - Installation

react-native-screens package requires one additional configuration step to properly work on Android devices. Follow the next steps or View the original instructions

iOS

Installation on iOS is completely handled with auto-linking, if you have ensured pods are installed after adding this module, no other actions are necessary.

Android

On Android the View state is not persisted consistently across Activity restarts, which can lead to crashes in those cases. It is recommended to override the native Android method called on Activity restarts in your main Activity, to avoid these crashes.

For most people using an app built from the react-native template, that means editing MainActivity.java, likely located in android/app/src/main/java/<your package name>/MainActivity.java

You should add this code, which specifically discards any Activity state persisted during the Activity restart process, to avoid inconsistencies that lead to crashes. Please note that the override code should not be placed inside MainActivityDelegate, but rather directly in MainActivity.

1import android.os.Bundle;
2
3public class MainActivity extends ReactActivity {
4
5    //...code
6
7    //react-native-screens override
8    @Override
9    protected void onCreate(Bundle savedInstanceState) {
10        super.onCreate(null);
11    }
12
13    public static class MainActivityDelegate extends ReactActivityDelegate {
14        //...code
15    }
16}

1import android.os.Bundle;
2
3class MainActivity: ReactActivity() {
4
5    //...code
6
7    //react-native-screens override
8    override fun onCreate(savedInstanceState: Bundle?) {
9      super.onCreate(null);
10    }
11}

For people that must handle cases like this, there is a more detailed discussion of the difficulties in a series of related comments.

buildscript {
    ext {
        ...
        kotlinVersion = "1.4.10"
    }
}

Windows

Installation on Windows should be completely handled with auto-linking when using React Native Windows 0.63+. For earlier versions, you must manually link the native module.

Add @redshank/native-router plugin

Add @redshank/native-router/plugin plugin to your babel.config.js

1module.exports = {
2  presets: [
3    ... // don't add it here :)
4  ],
5  plugins: [
6    ...
7    ['@redshank/native-router/plugin'],
8  ],
9};

Enable require.context

Add unstable_allowRequireContext transformer option to your metro.config.js

1const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
2
3/**
4 * Metro configuration
5 * https://facebook.github.io/metro/docs/configuration
6 *
7 * @type {import('metro-config').MetroConfig}
8 */
9const config = {
10  transformer: {
11    unstable_allowRequireContext: true,
12  },
13};
14
15module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Clear Metro bundler cache (recommended)

1yarn start --reset-cache

Usage

1import RouterRoot from '@redshank/native-router';
2
3<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

1import React from 'react';
2import { Text, View } from 'react-native';
3
4export default function Home() {
5  return (
6    <View>
7      <Text>Home</Text>
8    </View>
9  );
10}

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.

1import React from 'react';
2import { Text, View } from 'react-native';
3
4export default function UserPost() {
5  const params = useParams();
6  return (
7    <View>
8      <Text>
9        Detail: {params.user} - {params.post}
10      </Text>
11    </View>
12  );
13}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library