Using Codemagic CI/CD for your React Native apps

How to build a React Native app with codemagic

Published in

LITSLINK

6 min readDec 6, 2023

Today I wanna write a story about an exciting topic. I think, that everybody spends a lot of time building and delivering their app. So I wanna share with you how to make it easy and fast. For this purpose, we gonna use the Fastlane tool and Codemagic CI/CD.

Application creation

First of all, you need to create a new blank project with react-native init codemagic and add it to git. Now open this project with any IDE.

Note: in the new react-native template (for react-native version 0.71.0) you need to install gems before you gonna be able to install pods. So run bundle install and then cd ios && pod install .

Open package.json file and new script under the scripts section

"build:ios": "react-native bundle --entry-file ./index.js --platform ios --bundle-output ios/main.jsbundle --assets-dest ios",

Now add app icons and splash screen to the project. Please check this article on how to do this https://medium.com/litslink/how-to-add-app-icons-and-splash-screen-to-your-react-native-application-97c5aefb6978.

IOS preparation

Go to Apple Developer Program => press Account => sign in with your credentials => select Identifiers . Create your project bundle identifier. Now create a new app with this bundle ID in App Store Connect. You need to create an API key in App Store Connect as well to be able to push your builds to TestFlight using Fastlane.

Note: Please check this article on how to prepare stores

Android preparation

Create your release keystore (replace my-upload-key and my-key-alias with your values and set all requested data) and put it to the path android/app . To do this run the following command in your project’s terminal.

keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

Note: Don’t forget to add release keystore to the repository

Now, go to android => app => build.gradle and add next code under defaultConfig

flavorDimensions "variants"
  productFlavors {
    prod {
      dimension "variants"
      applicationId "com.codemagic"
      manifestPlaceholders = [crewcostApplicationLabel: "Codemagic"]
    }
  }

and under the signingConfigs add new config named release with the following code

release {
          storeFile file(String.valueOf(System.getenv("RELEASE_KEYSTORE_FILE")))
          storePassword System.getenv("RELEASE_KEYSTORE_PASSWORD")
          keyAlias System.getenv("RELEASE_KEY_ALIAS")
          keyPassword System.getenv("RELEASE_KEY_PASSWORD")
        }

and in buildTypes => release section add this code

signingConfig signingConfigs.release

Before you start with other steps, make sure you have done all the needed settings in the Google Play console. Please check this article for what must be done.

Note: Remember, that you need to upload the first build to the Google play console manually to be able to do the next uploads automatically with Faslane.

Faslane integration

Create fastlane folder in the root of your project and create file Fastfile there. Add the following code to the file:

Update your Gemfile with this code and then run bundle install

Add env files for all your environments with following code. For example .env.prod etc.

Now run bundle exec fastlane match_profiles — prod to create distribution certificate and provision profile.

Codemagic settings in the project

Create codemagic.yaml file with the following code and add it to the root of the project

Note: make sure the ruby version is the same like in your project’s .ruby-version file

Now you can push this project to Git.

Codemagic dashboard preparation

First of all, you need to have an account created in the codemagic dashboard. If you don’t have it, then create one by Signing Up.

After you sign up, you will see this page

Press the button Add your first app . In the popup, select a Git provider or add a repository from a URL:

On the next popup, press on Click here . The new window will be opened, where you need to give access to your repository:

After you give access, you will be returned to codemagic. You will see this pop-up:

You need to select your repository and project type React Native App

Now press the button Add application . Then you will see this page.

Note: If you don’t see codemagic.yaml , then select branch where you have this file.

Go to tab Environment variables and add next variables:

MATCH_KEYCHAIN = fastlane_keychain = IOS-secrets (group name created)
MATCH_PASSWORD = your password = IOS-secrets (group name created)
APP_STORE_CONNECT_API_KEY_KEY = your API key = IOS-secrets (group name created)
MODULE_SSH_KEY = your private key = module_credentials (group name created). This variable is for access to certificates repository. See instructions here
RELEASE_KEY_ALIAS = your alias = android-secrets (group name created)
RELEASE_KEYSTORE_FILE = name of your keystore file = android-secrets (group name created)
SUPPLY_JSON_KEY_DATA = your JSON key data = android-secrets (group name created)
RELEASE_KEY_PASSWORD = your key password = android-secrets (group name created)
RELEASE_KEYSTORE_PASSWORD = your keystore password = android-secrets (group name created)