You can easily set up and configure your React Native project on Bitrise - the power is in your hands if you want to deploy both native versions or just one to distribution platforms! Your React Native repo can consists of an Android and an iOS project so configurations should be done as you would normally do with Android and iOS apps. When running a React Native project, you will see that first an Android, then an iOS build gets built. If your organization has more than one concurrency, you can have Android and iOS builds run simultaneously.
- Before setting up a React Native project
- Adding a React Native project to bitrise.io
- Installing dependencies
- Code signing
- Testing your project
- Deploying to Bitrise
- Deploying to an app store
Adding a React Native project to bitrise.io ⚓
In this tutorial, we’re using this sample app. Let’s start!
- Log into bitrise.io.
Add a new app.
- 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
Validating repository, Bitrise runs an automatic repository scanner to set up the best configuration for your project.
Project build configuration, select your preferred build configuration.
- For React Native projects, you should see
React Nativeas the selected project type. If the scanner fails and the project type is not selected automatically, you can configure your project manually. You can see that Android is automatically selected in
The root directory of an Android app.
- If your project consist of only one module, that module will be automatically selected for
Module. If your project contains more than one module, you can pick a module, but we recommend the main one!
Select variant for buildingfield, select a variant that suits your project. Pick
Select All Variantsto build all variants. Pick
releaseif you wish to generate an APK or an .ipa file.
- Select your Xcode project or Xcode Workspace path in the
Project (or Workspace) path field.
Select Scheme name. The scanner validation will fail if you do not have a SHARED scheme in your project. You can still point Bitrise manually to your Xcode scheme but if it’s shared, we automatically detect it for you. Read more about schemes and the possible issues with them!.
Select ipa export method, select the export method of your .ipa file:
- For React Native projects, you should see
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 of your Build’s page.
Installing dependencies ⚓
If Bitrise scanner has successfully scanned your project,
Run npm command or
Run yarn command steps will be included in your workflow.
Run npm command, type
install in the
Native dependencies ⚓
Install missing Android SDK components Step installs the missing native dependencies for your Android project - luckily this steps is by default included in your deploy workflow.
For iOS dependencies, you can add the
Run CocoaPods install step to your workflow as it is not part of the workflow by default.
Code signing ⚓
A React Native app can 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 the process step by step!
Signing your Android project ⚓
- Select the
deployworkflow at the
WORKFLOWdropdown menu in the top left corner of your apps’ Workflow Editor.
- Go to the
- Drag-and-drop your keystore file to the
ANDROID KEYSTORE FILEfield.
Fill out the
Keystore alias, and
Private key passwordfields and click
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 Signingtab, 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!
Signing and exporting your iOS project for testing ⚓
Code signing your iOS project depends on what you wish to do with the exported .ipa file. In this section, we describe how to code sign your project if you wish to install and test it on internal testers’ registered devices. You will need an .ipa file exported with the
development export method to share your project with testers.
If you wish to upload your .ipa file to an app store, check out this section!
You will need:
- the automatically created
- an iOS Development certificate (a .p12 certificate file)
- a Development type Provisioning Profile
- Set the code signing type of your project in Xcode to either manual or automatic (Xcode managed), and generate an .ipa file locally.
Collect and upload the code signing files with the codesigndoc tool.
The tool can also upload your code signing files to Bitrise - we recommend doing so! Otherwise, upload them manually: enter the Workflow Editor and select the
Code signingtab, then upload the files in their respective fields.
- Go to your app’s Workflow Editor, and select the
deployworkflow in the
WORKFLOWdropdown menu in the top left corner.
- Check that you have the
Certificate and profile installerStep in your workflow. It must be before the
Xcode Archive & Export for iOSStep (you can have other Steps between the two, like
Xcode Test for iOS).
Select method for exportinput of the
Xcode Archive & Export for iOSStep. By default, it should be the
$BITRISE_EXPORT_METHODenvironment variable. This variable stores the export method you selected when creating the app. If you selected
developmentback then, you don’t need to change the input. Otherwise, manually set it to
- Start a build.
If you uploaded the correct code signing files, the
Certificate and profile installer Step should install your code signing files and the
Xcode Archive & Export for iOS Step should export an .ipa file with the development export method. If you have the
Deploy to Bitrise.ioStep in your workflow, you can find the .ipa file on the
APPS & ARTIFACTS tab of the Build’s page.
Signing and exporting your iOS project for deployment ⚓
If you set up your code signing files and created an .ipa file for your internal testers, it is time to involve external testers and then to publish your iOS app to the App Store.
To deploy to Testflight and to the App Store, you will need more code signing files:
- an iOS Distribution Certificate
- an App Store type Provisioning Profile
- On your local machine, set up App Store code signing for your project in Xcode, and export an App Store .ipa file. If this fails locally, it will definitely fail on Bitrise, too!
- Collect and upload the code signing files with the codesigndoc tool.
- Go to the app’s Workflow Editor and create a new workflow: click the
+ Workflowbutton, enter the name of your new workflow and in the BASED ON dropdown menu, select
deploy. This way the new workflow will be a copy of the basic
Select method for exportinput of the
Xcode Archive & Export for iOSStep to
If you wish to distribute your app to external testers without uploading the app to Testflight, select
ad-hocmethod and make sure you have the
Deploy to Bitrise.iostep in your workflow.
Testing your project ⚓
You can use React Native’s built in testing method, called
jest. Add another
Run nmp command step to your workflow, and type
test in the
npm command with arguments to run input field.
Deploying to Bitrise ⚓
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.iostep.
- In the
Notify: User Roles, add the role so that only those get notified who have been granted with this role. Or fill out the
Notify: Emailsfield 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
Notificationsif you click the
eyeicon next to your generated APK/.ipa file in the
APPS & ARTIFACTStab.
Deploying to an app store ⚓
If you wish to deploy your iOS app, follow the steps in Code sign your iOS project for deployment.
Deploying your iOS app to Testflight and iTunes Connect ⚓
- Add the
Deploy to iTunes Connect - Application LoaderStep to your workflow, after the
Xcode Archive & Export for iOSStep but preferably before the
Deploy to Bitrise.ioStep.
Provide your Apple credentials in the
Deploy to iTunes Connect - Application LoaderStep.
The Step will need your:
- Apple ID
- password or, if you use two-factor authentication on iTunes Connect, your application 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 ⚓
- Make sure you are in sync with Google Play Store! Learn how to
- In your Bitrise
Dashboard, go to
Code Signingtab 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
Google Play Deploystep after the
Sign APKstep in your deploy workflow.
- Fill out the required input fields as follows:
Service Account JSON key file path: This field can accept a remote URL so you have to provide the environment variable which contains your uploaded service account JSON key. For example:
Package name: the package name of your Android app
Track: the track where you want to deploy your APK (alpha/beta/rollout/production)
And that’s it! Start a build and release your Android app to the app store of your choice.