Skip to main content

Standard navigator

The standard-navigation package provides a standard API for writing navigators that can work with multiple navigation libraries, such as React Navigation and Expo Router.

This is primarily useful for library authors. If you don't plan to publish the library and are building a navigator for use with your existing React Navigation setup, see Custom navigators instead.

Project structure​

Install standard-navigation as a regular dependency in your navigator library:

npm install standard-navigation

Keep the standard navigator implementation independent from any specific navigation library. Then expose separate entry points for each navigation library:

my-navigator/
  package.json
  src/
    MyTabNavigator.tsx
    react-navigation.tsx
    expo-router.tsx

Your package exports can point to those entry points:

{
  "exports": {
    ".": {
      "types": "./lib/typescript/index.d.ts",
      "default": "./lib/module/index.js"
    },
    "./react-navigation": {
      "types": "./lib/typescript/react-navigation.d.ts",
      "default": "./lib/module/react-navigation.js"
    },
    "./expo-router": {
      "types": "./lib/typescript/expo-router.d.ts",
      "default": "./lib/module/expo-router.js"
    }
  },
  "dependencies": {
    "standard-navigation": "^0.0.7"
  }
}

To get React Navigation types, you can add @react-navigation/native as a devDependency and an optional peerDependency:

{
  "devDependencies": {
    "@react-navigation/native": "^7.3.0"
  },
  "peerDependencies": {
    "@react-navigation/native": ">= 7.3.0"
  },
  "peerDependenciesMeta": {
    "@react-navigation/native": {
      "optional": true
    }
  }
}

Standard navigator implementation​

The standard navigator file should export the navigator object created with createStandardNavigator. This file shouldn't import React Navigation or Expo Router APIs.

To create a standard navigator, use the createStandardNavigator function from standard-navigation, and pass it a component that renders the desired UI.

The basic shape looks like this:

export type MyTabOptions = {
  // screen options type
};

export