Setting Up an Expo Development Build

📅

loading..🐩🐩🐩🐩

Before We Begin 🔗

This article assumes you already have a basic Expo project. To create one, see the guides for Windows and Mac.

The Limits of Expo Go 🔗

Before looking at development builds, let's review the Expo Go app you may already be using.

If you created your first React Native project with npx create-expo-app and ran it with npx expo start, you probably used Expo Go. The Expo team publishes this native app on Google Play and the Apple App Store so you can start coding quickly. It is a
sandbox app
with a predefined set of native libraries. You can edit your JavaScript locally and see the changes in Expo Go. (Source: Official Expo documentation↗)

Expo Go is a prebuilt shell that lets you see the results of JavaScript changes quickly. Its native code is fixed, so certain libraries or features such as push notifications may not work in Expo Go. Expo provides a way to customize the native code, and a development build makes that workflow easier.

Install expo-dev-client 🔗

What Is expo-dev-client? 🔗

Expo Go comes with a developer menu that you can open by pressing m in the terminal running Expo. The expo-dev-client package gives your development build a developer menu too.

Installation 🔗

npx expo install expo-dev-client

Build the Native App 🔗

There are two main options: build with EAS or build locally.

Build with EAS 🔗

What Is EAS? 🔗

EAS stands for Expo Application Services, a cloud service from Expo. It provides tools to build Android and iOS apps and manage build, update, and submission workflows. It is useful if you plan to publish to app stores or collaborate with a team. The cloud service runs outside your local machine and has usage limits.

Before you begin, install the EAS CLI and sign in with the commands below.

npm install -g eas-cli
eas login

Android Build 🔗

eas build --platform android --profile development

iOS Build 🔗

For an iOS Simulator build, add eas.json to the project root with the following configuration.

{
  "build": {
    "development": {
      "ios": {
        "simulator": true
      }
    }
  }
}

Then run this command.

eas build --platform ios --profile development

Build Locally 🔗

Android Build 🔗

npx expo run:android

iOS Build 🔗

npx expo run:ios

To build for a physical device, use this command.

npx expo run:ios --device

After the Build Finishes 🔗

If You Built with EAS 🔗

For example, after an iOS Simulator build finishes, you'll be prompted to download it. You can also find it in the Expo dashboard↗.

Click the build to download a ~.tar.gz file. Extract the archive, then drag the resulting app package onto the simulator to install it.

If You Built Locally 🔗

After the build finishes, the app is installed on the simulator. You now have a development environment where you can modify native code and run your own app independently of Expo Go. Run npm start, then press s to open the development build and continue developing.

Conclusion 🔗

The platform folders for your build (ios and android) should now exist in the project root. You can edit the native code in those folders and try changes that Expo Go could not run.

Further Considerations 🔗

How could you automate deployment?

References 🔗

Setting Up an Expo Development Build | PromleeBlog