Continuous Integration and Continuous Delivery (CI/CD) with Bitrise in React Native

Published in

Simform Engineering

7 min readDec 4, 2019

Being a tech enthusiast and a lazy mobile developer, I always want things to be automated. I believe the same when it comes to deploying applications to Google Play, Apple Store or any other platform. If we talk about iOS build, one has to archive the build, and then has to push the build to Appstore connect. And if we talk about Android, one has to generate a release build and sign it, and then have to upload it to Google Play. This task becomes more time consuming for cross-platform developers. Moreover, we need to follow these same steps for every build release.

As a way to make the build release process faster and hassle-free, we have implemented CI/CD with Bitrise for our React Native projects at Simform.

What Bitrise can do for us?

Bitrise gives us the power to release our build in one click. Yes, you read it correctly, with just one click you will have your release build.

Release and deploy a build with just one click
Auto trigger a build when code gets merged to the specified branch
Schedule a build to release and deploy
Notify the status of the build process
And many more!

Setup workflows at Bitrise and trigger a build to deploy automatically to the app store as well as to play store.

Bitrise integration in react native is similar to the native iOS and Android CI/CD integration except for a few steps that I’m going to cover below.

Let’s get deep dive into Bitrise CI/CD with React Native and Let’s check how it works?

Bitrise CI/CD is completely independent of our local system as it runs on its own stack and configurations.

What we’re going to do is that we’ll define a set of tasks/flows and instruct Bitrise to execute them sequentially. As Bitrise is doing the same with a selected workflow to release build. It’s confusing about the next steps?

We will be going to create two different apps here, one for the Android releases and other one for the iOS releases. This approach will help us to debug and maintain both the platforms easily.

Let’s start from the beginning:

Choose “Add New App” button from the top right corner and create a new app
Choose an account and set the privacy of the app private or public

3. Connect repository with SSH or HTTPS

4. In case of SSH, add ssh key generated by Bitrise to your account

5. Choose a branch — develop/master/feature

6. Now let’s Bitrise to validate your repository

7. Add project build configurations

8. Add an App icon

9. Scroll to the top and click on finish

That’s it now it’s automatically triggered the first build. We need to abort it because it will be going to fail, as we don’t have a proper workflow setup.

React Native Android CI/CD with Bitrise:

To release an apk or an Android app bundle to play store we need to add the following workflow steps:

Active SSH key (default): No need to update anything in it

Git clone repository (Default): No need to update anything in it
Run npm command: Add command ‘npm install’

Install react-native: Define the version of ‘react-native-cli’

Install missing Android SDK: Add gradlew file path

File downloader: Download Keystore file, make sure you’ve uploaded Keystore file in code signing. Let’s hold and complete below step first 🤔
Upload Keystore file: open code signing tab in the workflow editor and upload the Keystore file.

Continue — File downloader:

Gradle runner: Define Gradle file path and add a Gradle task to run eg. assembleRelease

Android Sign: It automatically detects all the information based on the configuration so leave it as it is

Deploy to play store: Generate service account’s JSON key file and upload it to the code signing and define a path to same here and enter a package name
Link your API Project by Creating a new API project or Using an existing API project.
Set Up API Access Clients Using a service account and do not forget to download the service account’s JSON key.
Grant Release manager role to the Service Account.

Make sure you have selected a suitable stack for Android before schedule/run a build

That’s it for Android. Now trigger a build and deploy APK/Bundle to play store.

React Native iOS CI/CD with Bitrise:

Create a new app for the iOS build, select a suitable stack and follow the following steps to set up a complete workflow.

Active SSH key (default): same as described in the above steps
Git clone repository (default ): same as described in the above steps
Run npm command: same as described in the above steps
Install react-native: same as described in the above steps
Run CocoaPods install: This step will detect cocoa pods version from the podfile and install dependencies accordingly

iOS Auto Provision: Make sure you’ve uploaded certificates in code signing. Let’s hold and complete below step first 🤔
Uploaded certificates: open code signing tab in the workflow editor and upload certificates.

Connect your apple account directly with Bitrise: click on user icon and open account settings, check with the ‘connected account’ section and connect your apple account.

Connected apple developer account with your Bitrise app: open teams tab in your app’s Bitrise dashboard and scroll to the ‘Connected Apple Developer Portal Account’ section. select a user for whom you already added an apple developer account.

Continue — iOS Auto Provision:

Xcode achieve & Export for iOS: Update configuration name as Release

Deploy to iTunes connect: Generate or use an existing application-specific password to deploy IPA to iTunes connect

Now start a build, select a workflow and a branch it will automatically deploy your IPA to iTunes connect.

Yeah…👏 That’s it we’ve done CI/CD with Bitrise in react-native. Let’s configure the same in any React Native project and speed up the development process.

Happy deployment 😊 !!!

Do you think this tutorial will be of help to someone? Do not hesitate to share. If you are already using Bitrise, leave a comment describing your experience in implementing it for continuous integration.