React Native apps

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. Pairing it with Codemagic’s CI/CD pipeline creates a powerful tool that automates all phases of mobile app development.

Setting up a React Native project

If you do not have an existing React Native project or if you just want to quickly test Codemagic using a sample project, follow these steps to get started:

• Clone a sample
• New Expo project
• New React Native CLI project

npm install -g expo-cli

yarn global add expo-cli

expo init CodemagicSample
cd CodemagicSample

Using Expo without ejecting

To run a build on CI/CD we need to have the ios and android project folders. If you can’t or don’t want to permanently eject Expo from your app, then you can do it on the build server each time you run a build. Follow the steps below to get started. You can check the finished sample app in our samples repository.

1. Clone your repository to a temporary new location or create a new branch. in order to eject Expo once and get the android/app/build.gradle file.
2. Eject Expo once by running the following command:

   expo eject

3. Copy the android/app/build.gradle file from the ejected project and add it to your main repository. In our example, we create a support-files folder and store the build.gradle inside.
4. Whenever this guide calls for making changes to the android/app/build.gradle, apply these changes to the support-files/build.gradle file instead.
5. Follow the steps in other Expo without ejecting sections in this guide to install the expo cli tools on the VM, run the scripts to copy the build.gradle file to the correct location and use other tools to adjust iOS settings in the info.plist file.

Adding the app to Codemagic

The apps you have available on Codemagic are listed on the Applications page. Click Add application to add a new app.

1. If you have more than one team configured in Codemagic, select the team you wish to add the app to.
2. Connect the repository where the source code is hosted. Detailed instructions that cover some advanced options are available here.
3. Select the repository from the list of available repositories. Select the appropriate project type.
4. Click Finish: Add apllication

Creating codemagic.yaml

In order to use codemagic.yaml for build configuration on Codemagic, it has to be committed to your repository. The name of the file must be codemagic.yaml and it must be located in the root directory of the repository. Detailed explanation can be found here.

If you prefer to write your codemagic.yaml file from scratch, you can start with this minimal configuration.

• Android
• iOS

workflows:
    android-workflow-id:
        name: Android Sample Workflow
        max_build_duration: 120
        instance_type: mac_mini_m1

workflows:
    ios-workflow-id:
        name: iOS Sample Workflow
        max_build_duration: 120
        instance_type: mac_mini_m1

workflows:
    android-workflow-id:
        name: Android Sample Workflow
        # .......    
        # .......
        # .......  
    ios-workflow-id:
        name: iOS Sample Workflow
        # ......

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.

Code signing

All applications have to be digitally signed before they are made available to the public to confirm their author and guarantee that the code has not been altered or corrupted since it was signed.

• Android
• iOS

keytool -genkey -v -keystore codemagic.keystore -storetype JKS \
        -keyalg RSA -keysize 2048 -validity 10000 -alias codemagic

workflows:
  android-workflow:
    name: Android Workflow
    # ....
    environment:
      android_signing:
        - keystore_reference

...
  android {
      ...
      defaultConfig { ... }
      signingConfigs {
          release {
              if (System.getenv()["CI"]) { // CI=true is exported by Codemagic
                  storeFile file(System.getenv()["CM_KEYSTORE_PATH"])
                  storePassword System.getenv()["CM_KEYSTORE_PASSWORD"]
                  keyAlias System.getenv()["CM_KEY_ALIAS"]
                  keyPassword System.getenv()["CM_KEY_PASSWORD"]
              } else {
                  keyAlias keystoreProperties['keyAlias']
                  keyPassword keystoreProperties['keyPassword']
                  storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
                  storePassword keystoreProperties['storePassword']
              }
          }
      }
      buildTypes {
          release {
              ...
              signingConfig signingConfigs.release
          }
      }
  }
  ...

There is a problem with the request entity - You already have a current Distribution certificate or a pending certificate request.

workflows:
  ios-workflow:
    name: iOS Workflow 
    # ....
    environment:
      ios_signing:
        distribution_type: app_store # or: ad_hoc | development | enterprise
        bundle_identifier: com.example.id

  scripts:
    # ... your dependencies installation
    
    - name: Set up code signing settings on Xcode project
      script: xcode-project use-profiles
    
    # ... your build commands

Setting up the Android package name and iOS bundle identifier

Configure Android package name and iOS bundle identifier by adding the corresponding variables in the codemagic.yaml and editing the app.json files.

• Android
• iOS

workflows:
  react-native-android:
    # ....
    environment:
      groups:
        # ...
      vars:
        PACKAGE_NAME: "io.codemagic.sample.reactnative"

workflows:
  react-native-ios:
    # ....
    environment:
      groups:
        # ...
      vars:
        BUNDLE_ID: "io.codemagic.sample.reactnative"

Example of minimal app.json file. Add the android and/or ios keys:

{
  "expo": {
    "name": "codemagicSample",
    "slug": "codemagicSample",
    "version": "1.0.0",
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "bundleIdentifier": "io.codemagic.sample.reactnative"
    },
    "android": {
      "package": "io.codemagic.sample.reactnative"
    }
  }
}

Configure scripts to build the app

Add the following scripts to your codemagic.yaml file in order to prepare the build environment and start the actual build process. In this step you can also define the build artifacts you are interested in. These files will be available for download when the build finishes. For more information about artifacts, see here.

• Android
• iOS

scripts:
    # ....
  - name: Install npm dependencies
    script: | 
      npm install
  - name: Set Android SDK location
    script: | 
      echo "sdk.dir=$ANDROID_SDK_ROOT" > "$CM_BUILD_DIR/local.properties"
  - name: Build Android release
    script: | 
      cd android && ./gradlew bundleRelease

artifacts:
  - android/app/build/outputs/**/*.aab

react-native-ios:
  environment:
    groups:
      # ...
    vars:
      BUNDLE_ID: "io.codemagic.sample.reactnative"
      XCODE_WORKSPACE: "CodemagicSample.xcworkspace" # <-- Name of your Xcode workspace
      XCODE_SCHEME: "CodemagicSample" # <-- Name of your Xcode scheme
scripts:
  # ...
  - name: Build ipa for distribution
    script: | 
      xcode-project build-ipa \
        --workspace "$CM_BUILD_DIR/ios/$XCODE_WORKSPACE" \
        --scheme "$XCODE_SCHEME"
artifacts:
  - build/ios/ipa/*.ipa
  - /tmp/xcodebuild_logs/*.log
  - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.app
  - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.dSYM

Using Expo without ejecting

• Android
• iOS

scripts:
  - name: Install Expo CLI and eject
    script: | 
      npm install -g expo-cli
      expo eject
  - name: Set up app/build.gradle
    script: |
      mv ./support-files/build.gradle android/app

scripts:
  - name: Install Expo CLI and eject
    script: | 
      yarn install
      yarn global add expo-cli
      expo eject
  - name: Set Info.plist values
    script: | 
      PLIST=$CM_BUILD_DIR/$XCODE_SCHEME/Info.plist
      PLIST_BUDDY=/usr/libexec/PlistBuddy
      $PLIST_BUDDY -c "Add :ITSAppUsesNonExemptEncryption bool false" $PLIST
  - name: Install CocoaPods dependencies
    script: |
        cd ios && pod install

Build versioning

If you are going to publish your app to App Store Connect or Google Play, each uploaded artifact must have a new version satisfying each app store’s requirements. Codemagic allows you to easily automate this process and increment the version numbers for each build. For more information and details, see here.

• Android
• iOS

Publishing

Codemagic offers a wide array of options for app publishing and the list of partners and integrations is continuously growing. For the most up-to-date information, check the guides in the Configuration > Publishing section of these docs. To get more details on the publishing options presented in this guide, please check the Email publishing, the Google Play Store publishing and the App Store Connect.

Email publishing

If the build finishes successfully, release notes (if passed), and the generated artifacts will be published to the provided email address(es). If the build fails, an email with a link to build logs will be sent.

If you don’t want to receive an email notification on build success or failure, you can set success to false or failure to false accordingly.

workflows:
  sample-workflow-id:
    environment: 
      # ...
    scripts: 
      # ...
    publishing: 
      email:
        recipients:
          - user_1@example.com
          - user_2@example.com
        notify:
          success: true
          failure: false

Publishing to Google Play and App Store

• Android
• iOS

react-native-android:
  # ... 
  publishing:
    # ...
    google_play:
      credentials: $GCLOUD_SERVICE_ACCOUNT_CREDENTIALS
      track: internal
      submit_as_draft: true

sample-workflow-ios:
  # ... 
  publishing:
    # ...
    app_store_connect:
      api_key: $APP_STORE_CONNECT_PRIVATE_KEY
      key_id: $APP_STORE_CONNECT_KEY_IDENTIFIER
      issuer_id: $APP_STORE_CONNECT_ISSUER_ID
        #
        # Configuration related to TestFlight (optional)
        # Note: This action is performed during post-processing.
      submit_to_testflight: true 
      beta_groups: # Specify the names of beta tester groups that will get access to the build once it has passed beta review.
        - group name 1
        - group name 2
      #
      # Configuration related to App Store (optional)
      # Note: This action is performed during post-processing.
      submit_to_app_store: true

Conclusion

Having followed all of the above steps, you now have a working codemagic.yaml file that allows you to build, code sign, automatically version and publish your project using Codemagic CI/CD. Save your work, commit the changes to the repository, open the App in Codemagic UI and start the build to see it in action.

Your final codemagic.yaml file should look something like this:

workflows:
  react-native-android:
    name: React Native Android
    max_build_duration: 120
    instance_type: mac_mini_m1
    environment:
      android_signing:
        - keystore_reference
      groups:
        - google_play
      vars:
        PACKAGE_NAME: "io.codemagic.sample.reactnative"
    scripts:
      - name: Set Android SDK location
        script: | 
          echo "sdk.dir=$ANDROID_SDK_ROOT" > "$CM_BUILD_DIR/android/local.properties"
      - name: Install npm dependencies
        script: | 
          npm install
      - name: Install Expo CLI and eject
        script: | 
          npm install -g expo-cli
          expo eject
      - name: Set up app/build.gradle
        script: | 
          mv ./support-files/build.gradle android/app
      - name: Build Android release
        script: | 
          LATEST_GOOGLE_PLAY_BUILD_NUMBER=$(google-play get-latest-build-number --package-name '$PACKAGE_NAME')
          if [ -z LATEST_BUILD_NUMBER ]; then
              # fallback in case no build number was found from google play. Alternatively, you can `exit 1` to fail the build
              UPDATED_BUILD_NUMBER=$BUILD_NUMBER
          else
              UPDATED_BUILD_NUMBER=$(($LATEST_GOOGLE_PLAY_BUILD_NUMBER + 1))
          fi
          cd android && ./gradlew bundleRelease -PversionCode=$UPDATED_BUILD_NUMBER -PversionName=1.0.$UPDATED_BUILD_NUMBER
    artifacts:
      - android/app/build/outputs/**/*.aab
    publishing:
      email:
        recipients:
          - user_1@example.com
          - user_2@example.com
        notify:
          success: true
          failure: false
      google_play:
        credentials: $GCLOUD_SERVICE_ACCOUNT_CREDENTIALS
        track: internal
        submit_as_draft: true


  react-native-ios:
    name: React Native iOS
    max_build_duration: 120
    instance_type: mac_mini_m1
    environment:
      ios_signing:
        distribution_type: app_store
        bundle_identifier: io.codemagic.sample.reactnative
      groups:
        - appstore_credentials
      vars:
        BUNDLE_ID: "io.codemagic.sample.reactnative"
        XCODE_WORKSPACE: "CodemagicSample.xcworkspace" # <-- Put the name of your Xcode workspace here
        XCODE_SCHEME: "CodemagicSample" # <-- Put the name of your Xcode scheme here
        APP_ID: 1555555551
    scripts:
      - name: Install Expo CLI and eject
        script: | 
          yarn install
          yarn global add expo-cli
          expo eject
      - name: Set Info.plist values
        script: | 
          PLIST=$CM_BUILD_DIR/$XCODE_SCHEME/Info.plist
          PLIST_BUDDY=/usr/libexec/PlistBuddy
          $PLIST_BUDDY -c "Add :ITSAppUsesNonExemptEncryption bool false" $PLIST
      - name: Install CocoaPods dependencies
        script: | 
          cd ios && pod install
      - name: Set up provisioning profiles settings on Xcode project
        script: xcode-project use-profiles
      - name: Increment build number
        script: | 
          cd $CM_BUILD_DIR/ios
          LATEST_BUILD_NUMBER=$(app-store-connect get-latest-app-store-build-number "$APP_ID")
          agvtool new-version -all $(($LATEST_BUILD_NUMBER + 1))
      - name: Build ipa for distribution
        script: | 
          xcode-project build-ipa \
            --workspace "$CM_BUILD_DIR/ios/$XCODE_WORKSPACE" \
            --scheme "$XCODE_SCHEME"
    artifacts:
      - build/ios/ipa/*.ipa
      - /tmp/xcodebuild_logs/*.log
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.app
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.dSYM
    publishing:
      email:
        recipients:
          - user_1@example.com
          - user_2@example.com
        notify:
          success: true
          failure: false
      app_store_connect:
        api_key: $APP_STORE_CONNECT_PRIVATE_KEY
        key_id: $APP_STORE_CONNECT_KEY_IDENTIFIER
        issuer_id: $APP_STORE_CONNECT_ISSUER_ID

        # Configuration related to TestFlight (optional)
        # Note: This action is performed during post-processing.
        submit_to_testflight: true
        beta_groups: # Specify the names of beta tester groups that will get access to the build once it has passed beta review.
          - group name 1
          - group name 2

        # Configuration related to App Store (optional)
        # Note: This action is performed during post-processing.
        submit_to_app_store: false

Next steps

While this basic workflow configuration is incredibly useful, it is certainly not the end of the road and there are numerous advanced actions that Codemagic can help you with.

We encourage you to investigate Running tests with Codemagic to get you started with testing, as well as additional guides such as the one on running tests on Firebase Test Lab or Registering iOS test devices.

Documentation on using codemagic.yaml teaches you to configure additional options such as changing the instance type on which to build, speeding up builds by configuring Caching options, or configuring builds to be automatically triggered on repository events.