Expo Docs MCP Server

--- title: Install Expo Router description: Learn how to quickly get started by creating a new project with Expo Router or adding the library to an existing project. sidebar_title: Installation searchRank: 6 --- 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` to create a project with Expo Router library already installed and configured: Now, you can start your project by running: - To view your app on a mobile device, we recommend starting with [Expo Go](/get-started/set-up-your-environment/#how-would-you-like-to-develop). As your application grows in complexity and you need more control, you can create a [development build](/develop/development-builds/introduction/). - Open the project in a web browser by pressing <kbd>w</kbd> in the Terminal UI. Press <kbd>a</kbd> for Android (Android Studio is required), or <kbd>i</kbd> for iOS (macOS with Xcode is required). ## Manual installation Follow the steps below if you have a project that was previously created with Expo but does not have Expo Router library installed. ### Prerequisites Make sure your computer is [set up for running an Expo app](/get-started/create-a-project/). ### Install dependencies You'll need to install the following dependencies: The above command will install versions of these libraries that are compatible with the Expo SDK version your project is using. ### Setup entry point For the property `main`, use the `expo-router/entry` as its value in the **package.json**. The initial client file is [**app/\_layout.tsx**](/router/basics/layout/#root-layout). ```json package.json { "main": "expo-router/entry" } ``` <Collapsible summary="Custom entry point to initialize and load side-effects"> You can create a custom entry point in your Expo Router project to initialize and load side-effects before your app loads the root layout (**app/\_layout.tsx**). Below are some of the common cases for a custom entry point: - Initializing global services like analytics, error reporting, and so on. - Setting up polyfills - Ignoring specific logs using `LogBox` from `react-native` 1. Create a new file in the root of your project, such as **index.js**. After creating this file, the project structure should look like this: 2. Import or add your custom configuration to the file. Then, import `expo-router/entry` to register the app entry. Remember to always import it last to ensure all configurations are properly set up before the app renders. ```js index.js // Import side effects first and services // Initialize services // Register app entry through Expo Router import 'expo-router/entry'; ``` 3. Update the `main` property in **package.json** to point to the new entry file. ```json package.json { "main": "index.js" } ``` </Collapsible> ### Modify project configuration Add a deep linking `scheme` in your [app config](/workflow/configuration/): ```json app.json { "scheme": "your-app-scheme" } ``` If you are developing your app for web, install the following dependencies: Then, enable [Metro web](/guides/customizing-metro/#adding-web-support-to-metro) support by adding the following to your [app config](/workflow/configuration/): ```json app.json { "web": { "bundler": "metro" } } ``` ### Modify babel.config.js Ensure you use `babel-preset-expo` as the `preset`, in the **babel.config.js** file or delete the file: ```js babel.config.js module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], }; }; ``` ### Clear bundler cache After updating the Babel config file, run the following command to clear the bundler cache: ### Update resolutions If you're upgrading from an older version of Expo Router, ensure you remove all outdated Yarn resolutions or npm overrides in your **package.json**. Specifically, remove `metro`, `metro-resolver`, `react-refresh` resolutions from your **package.json**.