Install Expo Router

Learn how to quickly get started by creating a new project with Expo Router or add the library to an existing project.

Find the steps below to create a new project with Expo Router library or add it to your existing project.

Quick start

We recommend creating a new Expo app using create-expo-app. This will create a minimal project with the Expo Router library already installed. To create a project, run the command:

Terminal

- npx create-expo-app@latest --template tabs@49

Once setup, you can start your project by running:

Terminal

- npx expo start

To view your app on a mobile device, we recommend starting with Expo Go. As your application grows in complexity and you need more control, you can create a development build.
Open the project in a web browser by pressing w in the Terminal UI. Press a for Android (Android Studio is required), or i for iOS (macOS with Xcode is required).

Manual installation

Ensure the version of Expo Router is compatible with the Expo SDK version your project is using.

Expo SDK	Expo Router
49.0.0	2.0.0
48.0.0	1.0.0

Prerequisites

Make sure your computer is set up for running an Expo app.

Create an Expo project

To create a new project, run the following command:

Terminal

- npx create-expo-app

Install dependencies

You'll need to install the following dependencies:

Terminal

-

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler

The above command will install versions of these libraries that are compatible with the Expo SDK version your project is using.

Setup entry point

Use the expo-router/entry file in the package.json. The initial client file is app/_layout.js.

package.json

{
  "main": "expo-router/entry"
}

Either delete the entry point in your package.json or replace it with index.js to be explicit:

package.json

{
  "main": "index.js"
}

Create a new file index.js in the root of your project. If it exists already, replace it with the following:

index.js

import 'expo-router/entry';

Modify project configuration

Add a deep linking scheme in your app config:

app.json

{
  "scheme": "your-app-scheme"
}

If you are developing your app for web, install the following dependencies:

Terminal

- npx expo install react-native-web react-dom

Then, enable Metro web support:

app.json

{
  "web": {
    "bundler": "metro"
  }
}

Modify babel.config.js

Add expo-router/babel plugin in the plugins array to your project's babel.config.js:

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['expo-router/babel'],
  };
};

For Expo SDK below 49

Expo Router requires at least metro@0.76.0. If you are using Expo SDK version below 49, you will need to force upgrade your metro version by setting a Yarn resolution or npm override.

package.json

{
  "resolutions": {
    "metro": "0.76.0",
    "metro-resolver": "0.76.0"
  }
}

package.json

{
  "overrides": {
    "metro": "0.76.0",
    "metro-resolver": "0.76.0"
  }
}

Next steps

Create pages with Expo Router

Learn about the file-based routing convention used by Expo Router.