Supporting Native Features to Expo Application using EAS Build

Introduction

EAS Build is a hosted service for building app binaries for Expo and React Native projects.

Using EAS has the Following Advantages

• It’s very easy to build apps for deployment by processing signature credentials.
• Include libraries with native code that aren’t part of the Expo standard library.
• Can reduce the app capacity.
• Can easily share test builds with colleagues without going through the app store.
• Can build all platforms with just one command.

Prerequisites

• Expo SDK Version > 42
• React Native Version ~ 0.63

Configuring Application for EAS

• EAS can be used for building non-expo applications as well, so the EAS cli isn’t bundled with Expo. Install it globally with expo-cli. npm install -g eas-cli
• Run eas build. It will create an eas.json file in the application.
• Add missing configurations in the eas.json from the following configurations.

{
  "cli": {
    "version": ">= 0.40.0"
  },
  "build": {
    "development": {
      "extends": "production",
      "developmentClient": true,
      "distribution": "internal",
      "releaseChannel": "default",
      "android": {
        "buildType": "apk"
      }
    },
    "devclient": {
      "extends": "production",
      "releaseChannel": "default",
      "distribution": "internal",
      "developmentClient": true,
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": true
      }
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

Utilizing releaseChannel: "default" in our development build, and not our production builds, we can make sure that an accidental expo publish doesn’t push code to our live application.

Build Development Application via EAS

• Run eas device:create and follow the prompts.
• Run eas build --profile=devclient to run preview build. This will create a custom simulator build. Upon installing the simulator, it will look different than the normal expo GO application UI.

• Run expo start --dev-client instead of expo start. The project will show up in development build with a URL structure of exp+<project>://expo-development-client/…. The exp+<project> the protocol helps the native OS determine the difference between the custom Expo app and any others that might have on the simulator or device.

Install Native Feature

Take the example of react-native-ble-plx to install.

• Run expo install react-native-ble-plx
• Run expo install @config-plugins/react-native-ble-plx
• Add the plugin in the app.json file.

{
  "expo": {
    // ...
    "plugins": ["@config-plugins/react-native-ble-plx"]
}

• Finally, run eas build --profile=devclient and run the simulator. It will just work.

We can repeat these steps to add any Native Feature to the expo project.