You can generate React Native projects with the React Native CLI or with the Expo CLI. Expo is a toolchain that allows you to quickly get a React Native app up and running without having to use native code in Xcode or Android Studio.
In this guide we discuss how to set up, test, code sign and deploy your React Native project built with the Expo CLI.
Whether you’ve been using ExpoKit or not with your project, Bitrise project scanner detects the necessary configuration and adds the [BETA] Expo Eject Step to your deploy workflow. If you’ve been using ExpoKit with your React Native app, Bitrise project scanner adds the necessary platform-specific dependency manager Steps to your workflow as well.
Adding an Expo app to bitrise.io ⚓
First, let’s see how to add a React Native Expo app to bitrise.io.
- Log into bitrise.io.
- Click the + sign on the top menu bar and select Add app, which takes you to the Create New App page.
- Select the privacy setting of your app: private and public.
- Select the Git hosting service that hosts your repository, then find and select your own repository that hosts the project. Read more about connecting your repository.
- When prompted to set up repository access, click No, auto-add SSH key. Read more about SSH keys.
- Type the name of the branch that includes your project’s configuration - master, for example, - then click Next.
- At Validating repository, Bitrise runs an automatic repository scanner to set up the best configuration for your project.
At Project build configuration, the React Native project type gets automatically selected. If the scanner fails and the project type is not selected automatically, you can configure your project manually. Bitrise also detects the Module and the Variant based on your project.
Now let’s have a look at the fields you manually have to fill out:
- To generate an iOS app from your React Native project, enter your iOS Development team ID at the Specify iOS Development team field.
- In Select ipa export method, select the export method of your .ipa file: ad-hoc, app-store, development or enterprise method.
- In Specify Expo username, enter your username and hit Next.
- In Specify Expo password, enter your password and hit Next. You only need to provide your Expo credentials if you’ve been using ExpoKit with your project.
- Confirm your project build configuration.
- Upload an app icon.
- At Webhook setup, register a Webhook so that Bitrise can automatically start a build every time you push code into your repository.
You have successfully set up your React Native project on bitrise.io! Your first build gets kicked off automatically using the primary workflow. You can check the generated reports of the first build on the APPS & ARTIFACTS tab on your Build’s page.
Installing dependencies ⚓
If Bitrise scanner has successfully scanned your app, depending on your project configuration, Run npm command or Run yarn command Step will be included in your workflow.
The default value of the Run npm command Step is
Ejecting your app ⚓
React Native apps built with Expo do not come with native modules. Since our build Steps are platform-specific, Bitrise has to eject your app, add and configure the necessary native templates. Then our native dependency installer Steps take care of installing any missing native dependencies so that your project is ready for building and shipping.
The Bitrise project scanner automatically inserts the [BETA] Expo Eject Step right after the Run npm command or Run yarn command Steps in your deploy workflow.
Let’s see which fields you have to fill out when clicking [BETA] Expo Eject Step!
- Working directory input field: Provide the path of your project directory.
- Expo CLI version: Provide the Expo CLI version you used for your project.
Username for Expo and Password for your Expo account: Provide your Expo credentials (username and password). If your project uses an Expo SDK, you must provide the username and password for your Expo account. Without the account, the Expo CLI will choose the plain
--eject-methodand the Expo SDK imports will stop working.
If your project does not use an Expo SDK then you don’t need to do anything.
Just add the step after the
git-clonestep and you are done.
Native dependencies ⚓
The Install missing Android SDK components Step installs the missing native dependencies for your Android project. This Step is by default included in your deploy workflow.
If you’ve been using the ExpoKit to develop your app, the Run CocoaPods install Step is automatically added to your deploy workflow to take care of any missing iOS dependencies.
Testing your app ⚓
You can use React Native’s built in testing method, called jest, to perform unit tests on your app.
- Add another Run npm command step to your workflow right after the first Run npm command Step.
testin the npm command with arguments to run input field.
- Start a build.
You can view the test artifacts on the APPS & ARTIFACTS tab of your Build’s page.
Code signing ⚓
A React Native app consists of two projects; an Android and an iOS - both must be properly code signed. If you click on the Code Signing tab of your project’s Workflow Editor, all iOS and Android code signing fields are displayed in one page for you.
Let’s see how to fill them out!
Signing your Android app ⚓
- Select the deploy workflow at the WORKFLOW dropdown menu in the top left corner of your app’s Workflow Editor.
- Go to the Code Signing tab.
- Drag-and-drop your keystore file to the ANDROID KEYSTORE FILE field.
Fill out the Keystore password, Keystore alias, and Private key password fields and click Save metadata.
You should have these already at hand as these are included in your keystore file which is generated in Android Studio prior to uploading your app to Bitrise. For more information on keystore file, click here. With this information added to your Code Signing tab, our Sign APK step (by default included in your Android deploy workflow) will take care of signing your APK so that it’s ready for distribution!
The Android chunk of code signing is done. Let’s continue with iOS!
Signing and exporting your iOS app for deployment ⚓
To deploy to Testflight and to the App Store, you will need the following code signing files:
- an iOS Distribution certificate.
- an App Store type provisioning profile.
- Open the Workflow tab of your project on bitrise.io.
- Click on Code Signing tab.
- Click or drag and drop the App Store type provisioning profile in the PROVISIONING PROFILE field and the iOS Distribution certificate in the CODE SIGNING IDENTITY field.
- Click on the Workflows tab and select your deploy Workflow.
- Set the Select method for export input field of the Xcode Archive & Export for iOS Step to app-store.
- Select Xcode Archive & Export for iOS Step and scroll down to the Force Build Settings input group.
Fill out the following input fields based on your uploaded code signing files:
Force code signing with Development Team: Add the team ID.
Force code signing with Code Signing Identity: Add the Code Signing Identity as a full ID or as a code signing group.
Force code signing with Provisioning Profile: Add the provisioning profile’s UDID (and not the file name).
- If the code signing files are manually generated on the Apple Developer Portal, you have to specify to use manual code signing settings since the ejected React Native project have Xcode managed code signing turned on. Click the Debug input group and add
CODE_SIGN_STYLE="Manual"to the Additional options for xcodebuild call input field.
Deploying to Bitrise ⚓
The Deploy to bitrise.io Step uploads all the artifacts related to your build into the APPS & ARTIFACTS tab on your Build’s page.
You can share the generated APK/.ipa file with your team members using the build’s URL. You can also notify user groups or individual users that your APK/.ipa file has been built.
- Go to the Deploy to bitrise.io Step.
- In the Notify: User Roles input field, add the role so that only those get notified who have been granted with this role. Or fill out the Notify: Emails field with email addresses of the users you want to notify. Make sure you set those email addresses as secret env vars! These details can be also modified under Notifications if you click the eye icon next to your generated APK/.ipa file in the APPS & ARTIFACTS tab.
Deploying to an app store ⚓
If you wish to deploy your iOS app, follow the steps in Signing and exporting your iOS app for deployment.
Deploying your iOS app to Testflight and iTunes Connect ⚓
- Modify the Xcode Archive & Export for iOS Step’s input fields to the force options and upload the app store profile and distribution certificate manually.
Add the Deploy to iTunes Connect - Application Loader Step to your workflow.
Put the Step after the Xcode Archive & Export for iOS Step but preferably before the Deploy to Bitrise.io Step.
Provide your Apple credentials in the Deploy to iTunes Connect - Application Loader Step.
The Step will need your:
- Apple ID.
- password or, if you use two-factor authentication on iTunes Connect, your app-specific password.
Don’t worry, the password will not be visible in the logs or exposed - that’s why it is marked SENSITIVE.
If everything went well, you should see your app on Testflight. From there, you can distribute it to external testers or release it to the App Store.
Deploying your Android app to Google Play Store ⚓
Before you’d use the Deploy to Google Play Step, make sure you have performed the following tasks:
- Upload the first APK manually to Google Play using the Google Play Console.
- Link your Google Play Developer Console to an API project.
- Set up API Access Clients using a service account: Please note when you create your service account on the Google Developer Console, you have to choose
jsonas Key Type.
- Grant the necessary rights to the service account with your Google Play Console. Go to Settings, then Users & permissions, then Invite new user. Due to the way the Google Play Publisher API works, you have to grant at least the following permissions to the service account:
- Access level: View app information.
- Release management: Manage production releases, manage testing track releases.
- Store presence: Edit store listing, pricing & distribution.
- As an optional step, you can add translations to your Store Listing. To allow the Deploy to Google Play Step to assign your
whatsnewfiles to the uploaded APK version, visit the Translate & localize your app guide and add translations to your Store Listing section.
Now let’s head back to Bitrise and finish off the deploy configuration!
- In your Bitrise Dashboard, go to Code Signing tab and upload the service account JSON key into the GENERIC FILE STORAGE.
Copy the env key which stores your uploaded file’s url.
- Add the Deploy to Google Play Step after the Sign APK Step in your deploy workflow.
- In the Service Account JSON key file path input, paste the Environment Variable which was generated when you uploaded the service account JSON key in the GENERIC FILE STORAGE. Note this input is marked as sensitive in the Step, meaning any Env Var you insert here will become a secret and won’t be printed out in a build log. Besides the generated Env Var, you can also add a file path right in the Step’s input field where the file path can be local or remote too:
- For remote JSON key file you can provide any download location as value, for example,
- For local JSON key file you can provide a file path url as value, for example,
- For remote JSON key file you can provide any download location as value, for example,
- Package name: the package name of your Android app.
- Track: the track where you want to deploy your APK (for example, alpha/beta/rollout/production or any custom track you set).
And that’s it! Start a build and release your app to the Google Play Store.
Deploy an app to Bitrise to be able to download the .ipa file and install it on devices specified in the app's Development Provisioning Profile. This way, your internal testers...
You can build and deploy your iOS application to a simulator, to show it off in a browser, for example. On Bitrise, we have a dedicated Step to build for...
Go through the procedure of adding an Android app on Bitrise from start to finish, from adding the app to deploying it. Learn about unit and UI testing and code...