Develop and Automate React Native Android APK Build with Expo, EAS, and Gitlab CI/CD

6 min readFeb 25, 2022

This article is written for University of Indonesia, Faculty of Computer Science’s Software Engineering Project coursework 2023.

React Native has changed the way we build mobile applications. With one code base, your React Native application can be used both on android and also iOS, saving development time. Relative to a web application, building and distributing a mobile application isn’t as straightforward. However, with help from Expo, EAS, and Gitlab CI/CD, our team is able to have a developer-friendly android build experience building Ajaib’s DEX Ecosystem.

Expo

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

With over 16k stars on Github, expo is the tool of choice for many React Native developers. There are many advantages of using expo, such as:

Interactive cross-platform development
App Distribution

Installation & Setup

Install expo-cli and eas-cli

yarn global add expo-cli eas-cli

npm install -g expo-cli eas-cli

Now you should be able to use the expo command. We’re going to use expo to initialize our project as well as run the application on whichever device is available. On the other hand, we’re going to use eas to build our application and obtain a shareable apk download link.

You will need an expo account to continue.

First, register

expo register

Then log in to your account

expo login

Project Initialization

Developing React Native applications has never been easier with expo. You can choose any expo templates for your app. After finding one you like, simply run:

expo init my-app --template expo-template-native-base-typescript

Project Development

To start your react native app, run:

yarn start

npm run start

The output of your terminal should look like this:

Choose whichever device you’d like to see the results on, if you used the same expo template as this tutorial, you should see something like this:

Great! Now let’s deploy and share the application so anyone can download it.

Expo Application Services (EAS)

Deeply integrated cloud services for Expo and React Native apps, from the team behind Expo.

Build Profiles

Build profiles are used to easily switch between other profiles while specifying the build output of each profile. For my use case, I need the build to generate an android app, more specifically an.apk file. To enable this, we need to create a new build profile, with the buildType set to apkunder android key.

eas.json

{
  "cli": {
    "version": ">= 0.47.0"
  },
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
  },
}

You can trigger the android build of your application by running:

eas build -p android --non-interactive --profile preview

A successful build should look like this:

Don’t worry if it fails, you can identify which step failed and look at the complete build logs.

GitLab Continuous Deployment

GitLab CI/CD can automatically build, test, deploy, and monitor your applications by using Auto DevOps.

For our project, we’re using Gitlab as our codebase repository. Please refer to the GitLab ci docs for more information. I will be guiding you on how to set up the automation of apk build using GitLab CI/CD.

Environment Variables

Just like when triggering the android build from local, we need to authenticate to expo first. Under Settings > CI/CD > Variables, provide the following:

EXPO_USERNAME
EXPO PASSWORD

Here is an example of a Gitlab yaml file without EAS:

script:
    - yarn install
    - export ANDROID_SDK_ROOT=/usr/lib/android-sdk
    - cd android
    - chmod +x gradlew && ./gradlew assembleRelease
    - cd .. && cp android/app/build/outputs/apk/release/app-release.apk $CI_PROJECT_NAME-$CI_COMMIT_REF_NAME.apk

With EAS, it does the same thing with fewer commands and an additional dashboard:

script:
    - apk add --no-cache bash
    - npx expo login -u $EXPO_USERNAME -p $EXPO_PASSWORD
    - EAS_NO_VCS=1 npx eas-cli build -p android --non-interactive --profile preview

Here is the full yaml file with EAS:

gitlab-ci.yml

---
image: node:alpine
cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - ~/.npm

stages:
  - build

before_script:
  - npm ci --cache .npm --prefer-offline

eas-build:
  stage: build
  only:
    - staging
    - master
  script:
    - apk add --no-cache bash
    - npx expo login -u $EXPO_USERNAME -p $EXPO_PASSWORD
    - EAS_NO_VCS=1 npx eas-cli build -p android --non-interactive --profile preview

You don’t need to understand yaml completely, but few things to note:

Jobs are specified in stages. For example, you’d most likely have another stage such as test.
before_script runs on every stage
The only key under the eas-build object specifies for which branches do this stage run. In this example, eas-build won’t run on the development branch or any other branch besides staging and master.

All set! Push your code to your GitLab repository and CI/CD should be automatically reading the configuration from the yaml file.

Here is an example of what a correctly configured CI/CD pipeline should look like:

Conclusion

React Native with Expo is a great ecosystem to help develop and build your mobile application. Repetitively building the application is a waste of time, that’s where GitLab CI/CD comes in.

Gitlab CI/CD is a powerful and easy tool to implement CI/CD straight from your code repository if you’re using GitLab. As an aspiring developer, it’s a great learning experience, as every tech company uses CI/CD in some way.

CI/CD is used for running repetitive tasks such as tests and build/deployment and is an essential part of development, as it adds a layer of security on your codebase to prevent (not necessarily completely avoid) breaking changes. And even if something goes horribly wrong, it is not the end of the world as you’ve spotted the error before merging your merge request.

Notes

Keep in mind that the build takes a fair amount of time, around ~18 minutes on average (your mileage may vary).
Running expo publish is also another way to publish expo applications, but this took ~30 minutes on average.

An alternative to GitLab CI/CD is Github Actions if your project is using Github as your code repository. Other popular CI/CD alternatives are CircleCI and Jenkins.

References

About Us

Ajaib on DEX Ecosystem is a Mobile App Prototype as a proof of concept for trading coins on DEX via mobile phone.