Tools, workflows and extensions

Development builds allow you to iterate quickly. However, you can extend the capabilities of your development build to provide a better developer experience when working in teams or customize the build to suite your needs.

Tools

Tunnel URLs

Sometimes, restrictive network conditions make it difficult to connect to the development server. The npx expo start command exposes your development server on a publicly available URL that is accessible through firewalls from around the globe. This option is helpful if you are not able to connect to your development server with the default LAN option or if you want to get feedback on your implementation while you are developing.

To get a tunneled URL, pass the --tunnel flag to npx expo start from the command line. For more information, see Tunneling.

Published updates

EAS CLI's eas update command bundles the current state of your JavaScript and asset files into an optimized "update". This update is stored on a hosting service by Expo. A development build of your app can load published updates without needing to check out a particular commit or leave a development machine running.

Manually entering an update's URL

When a development build launches, it will expose UI to load a development server, or to "Enter URL manually". You can provide a URL manually that will launch a specific branch. The URL follows this pattern:

https://u.expo.dev/[your-project-id]?channel-name=[channel-name]

# Example
https://u.expo.dev/F767ADF57-B487-4D8F-9522-85549C39F43F?channel-name=main

To get your project's ID, use the URL in the Expo config's expo.updates.url field. To see a list of channels, run eas channel:list.

Deep linking URLs

You can load your app on a device that has a compatible build of your custom client by opening a URL of the form {scheme}://expo-development-client/?url={manifestUrl}. You'll need to pass the following parameters:

parameter	value
`scheme`	URL scheme of your client (defaults to `exp+{slug}` where `slug` is the value set in the Expo config)
`manifestUrl`	URL-encoded URL of a update manifest to load. The URL will be `https://u.expo.dev/[your-project-id]?channel-name=[channel-name]`

Example:

exp+app-slug://expo-development-client/?url=https%3A%2F%2Fu.expo.dev%2F767ADF57-B487-4D8F-9522-85549C39F43F%2F%3Fchannel-name%3Dmain

In the example above, the scheme is exp+app-slug, and the manifestUrl is a project with an ID of F767ADF57-B487-4D8F-9522-85549C39F43F and a channel of main.

QR Codes

You can use our endpoint to generate a QR code that can be easily loaded by a development build.

Requests send to https://qr.expo.dev/development-client when supplied the query parameters such as appScheme and url will receive a response with an SVG image containing a QR code that can be easily scanned to load a version of your project in your development build.

parameter	value
`appScheme`	URL-encoded deeplinking scheme of your development build (defaults to `exp+{slug}` where `slug` is the value set in the Expo config)
`url`	URL-encoded URL of a update manifest to load. The URL will be `https://u.expo.dev/[your-project-id]?channel-name=[channel-name]`

Example:

https://qr.expo.dev/development-client?appScheme=exp%2Bapps-slug&url=https%3A%2F%2Fu.expo.dev%2FF767ADF57-B487-4D8F-9522-85549C39F43F0%3Fchannel-name%3Dmain

In the example above, the scheme is exp+app-slug, and the url is a project with an ID of F767ADF57-B487-4D8F-9522-85549C39F43F and a channel of main.

Example workflows

These are a few examples of workflows to help your team get the most out of your development build. If you come up with others that would be useful for other teams, please submit a PR to share your knowledge!

Development builds

Developers on your team with expertise working with Xcode and Android Studio can update, review, and test changes to the native portion of your app and release them to your team periodically. The rest of your team can install these builds on their devices and simulators and quickly iterate on the JavaScript portion of your app without needing to understand and maintain the tooling required to create a new build.

Side by side installation

If you need to look at release builds of your project, it is convenient not to overwrite the development build of your app every time you do so. You can accomplish this by using app.config.js to set the bundle identifier or package name based on an environment variable. When changing the ID of your project, be aware that some modules will expect you to perform installation steps for each bundle identifier or package name you use. For more information, see how to use this pattern on EAS Build with build variants.

app.config.js

// Example app.config.js where the bundle identifier and package name are
// swapped out depending on an environment variable
module.exports = () => {
  if (process.env.MY_ENVIRONMENT === 'production') {
    return {
      ios: { bundleIdentifier: 'dev.expo.example' },
      android: { package: 'dev.expo.example' },
    };
  } else {
    return {
      ios: { bundleIdentifier: 'dev.expo.example.dev' },
      android: { package: 'dev.expo.example.dev' },
    };
  }
};

PR previews

You can set up your CI process to publish your project whenever a pull request is merged or updated and add a QR code that is used to view the change in a compatible development build.

expo-preview-action can be used to implement this workflow in your project using GitHub Actions or serve as a template in your CI of choice.

Extensions

Extensions allow you to extend your development client with additional capabilities.

Extending the dev menu

The dev menu can be extended to include extra buttons by using the registerDevMenuItems API:

import { registerDevMenuItems } from 'expo-dev-menu';

const devMenuItems = [
  {
    name: 'My Custom Button',
    callback: () => console.log('Hello world!'),
  },
];

registerDevMenuItems(devMenuItems);

This will create a new section in the dev menu that includes the buttons you have registered:

An example of a custom menu button in expo-dev-menu

Subsequent calls of registerDevMenuItems will override all previous entries.

EAS Update

The EAS Update extension provides the ability to view and load published updates in your development client.

It's now available for all development clients v0.9.0 and above. In order to install it, you'll need the most recent publish of expo-updates:

Terminal

→ npx expo install expo-dev-client expo-updates

Configure EAS Update

If you have not yet configured EAS Updates in your project, you can find additional instructions on how to do so here.

You can now view and load EAS Updates in your development build via the Extensions panel.

Set runtimeVersion in Expo config

When you create a development build of your project, you'll get a stable environment to load any changes to your app that are defined in JavaScript or other asset-related changes. Other changes to your app, whether defined directly in ios/ and android/ directories or by packages or SDKs you choose to install, will require you to create a new build of your development build.

To enforce an API contract between the JavaScript and native layers of your app, you should set the runtimeVersion value in the Expo config. Each build you make will have this value embedded and will only load bundles with the same runtimeVersion, in both development and production.

Build locally with Android Studio and Xcode

We do not recommend this method or modifying these android/ and ios/ directories directly, especially when creating a development build with EAS Build. For more information, see Prebuild.

If you need to debug native code or you prefer to manage your native projects, you can build and distribute your project using the npx expo run commands. You'll need to set up or have access to Android Studio, Xcode, and related dependencies on your local computer.

The npx expo run commands will create a new build, install it on your emulator/simulator or device, and start running it.

To build and run on an emulator:

Terminal

→ npx expo run:android

To build and run on a connected device:

Terminal

→ npx expo run:android -d

To build and run on a simulator:

Terminal

→ npx expo run:ios

To build and run on a connected device:

Terminal

→ npx expo run:ios -d

Running the above commands generates native source code in their corresponding android/ and ios/ directories.