Building a React Native app

How to build a React Native app with codemagic.yaml

React Native is a cross-platform solution that allows you to build apps for both iOS and Android faster using a single language. When working with YAML, the basics are still the same, the build scripts are added to the scripts section in the overall architecture.

Setting up a React Native project

The apps you have available on Codemagic are listed on the Applications page. See how to add additional apps here.

  1. On the Applications page, click Set up build next to the app you want to start building.
  2. On the popup, select React Native App as the project type and click Continue.
  3. Create a codemagic.yaml file and add in it the commands to build, test and publish your project. See the full Android and iOS workflow examples below.
  4. Commit the configuration file to the root of your repository.
  5. Back in app settings in Codemagic, scan for the codemagic.yaml file by selecting a branch to scan and clicking the Check for configuration file button at the top of the page. Note that you can have different configuration files in different branches.
  6. If a codemagic.yaml file is found in that branch, you can click Start your first build and select the branch and workflow to build.
  7. Finally, click Start new build to build the app.

Tip

Note that you need to set up a webhook for automatic build triggering. Click the Create webhook button on the right sidebar in app settings to add a webhook (not available for apps added via SSH/HTTP/HTTPS).

Android

You can find an up-to-date codemagic.yaml React Native Android workflow in Codemagic Sample Projects.

Set up local properties

- echo "sdk.dir=$ANDROID_SDK_ROOT" > "$FCI_BUILD_DIR/android/local.properties"

Building an Android application:

- cd android && ./gradlew build

iOS

You can find an up-to-date codemagic.yaml React Native iOS workflow in Codemagic Sample Projects.

Codemagic uses the xcode-project to prepare iOS application code signing properties for build.

Script for building an iOS application:

- xcode-project build-ipa --workspace "ios/MyReact.xcworkspace" --scheme "MyReact"

Read more about different schemes in Apple documentation.

Testing, code signing and publishing

To test and publish a React Native app:

  • The code for testing a React Native app also goes under scripts, before build commands. An example for testing a React Naive app can be found here.
  • All iOS and Android applications need to be signed before release. See how to set up iOS code signing and Android code signing.
  • All generated artifacts can be published to external services. The available integrations currently are email, Slack and Google Play. It is also possible to publish elsewhere with custom scripts (e.g. Firebase App Distribution). Script examples for all of them are available here.

Build versioning your React Native app

Android versioning

When using automatic build versioning in codemagic.yaml please note that configuration changes still need to be made in android/app/build.gradle

In the build.gradle note how the versionCode is set in the defaultConfig{}.

Additionally, pay attention to how signingConfigs{} and buildTypes{} are configured for debug and release.

iOS versioning

Build versioning for iOS projects is performed as a script step in the codemagic.yaml

See the Increment build number script in the codemagic.yaml in the React Native demo project on GitHub.