Skip to main content

Getting started with React Native projects

Expo projects

If you use Expo in a React Native project, we have a dedicated guide: Getting started with Expo projects.

You can easily set up and configure your React Native project on Bitrise. A React Native repo can consist 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 on Bitrise, you will see that first an Android, then an iOS build gets built.

Do you have a Bitrise account?

Make sure you have signed up to bitrise.io and can access your Bitrise account. There are multiple ways of registering an account:

Adding a React Native project to BitriseClick to copy link​

Add your project the same way as any other: see Adding a new project for the full walkthrough of the wizard. This section covers what's specific to React Native.

How the scanner detects a React Native projectClick to copy link​

The project scanner looks for a package.json file that lists react-native as a dependency, skipping anything under node_modules. It then checks for an ios/ and an android/ directory next to it, and only registers the project as React Native if at least one of them exists.

The scanner also checks whether your project uses Expo: if package.json lists expo as a dependency and there's an app.json, app.config.js, or app.config.ts file alongside it, Bitrise treats the project as Expo-based instead, and skips the native ios//android/ check. See Getting started with Expo projects for that flow.

What you can configureClick to copy link​

During the CI configuration stage, the wizard shows:

  • React Native project directory: the directory containing your package.json file.
  • For the Android part of your project: Project root directory, Module (defaults to app), and Variant (defaults to Debug).
  • For the iOS part of your project: Project or workspace path, Scheme name, and Distribution method.

Installing JavaScript dependenciesClick to copy link​

If the Bitrise project scanner has successfully scanned your project, Run npm command or Run yarn command Steps will be included in your default Workflows. These Steps can install the missing JavaScript dependencies for your app.

For native Android dependencies, you can use the Install missing Android SDK components Step.

For native iOS dependencies, you can use, among others, the Brew install Step or the Run CocoaPods install Step.

To install JavaScript dependencies with npm:

Using Yarn instead of npm

In this guide, we're using npm to install JavaScript dependencies. However, you can use the Run yarn command Step: it can install missing JS dependencies without any additional configuration required.

  1. Log in to Bitrise and select Bitrise CI on the left, then select your project.

  2. Click the Workflows button on the main page.

  3. Make sure your Workflow includes the Run npm command Step.

  4. In The 'npm' command with arguments to run input variable, type install.

    Getting_started_with_React_Native_apps.png

    Using the npm ci command instead of npm install

    If you already have an up to date package-lock.json file in your project, we recommend using the ci command in The 'npm' command with arguments to run input. Using npm ci can not only result in much faster build times compared to npm install but more reliable builds as well.

Code signing for React Native projectsClick to copy link​

A React Native project can consist of an Android and an iOS project. Both have different signing procedures. Follow our platform-specific instructions to code sign your mobile app for both iOS and Android.

Signing your Android projectClick to copy link​

All Android apps must be digitally signed with a certificate before they can be installed on Android devices. On Bitrise, you can use our dedicated Step for this purpose but first you'll need a keystore file.

  1. Generate a keystore file.

  2. Open your project on Bitrise with a user that has the Admin role on the project.

  3. On the main page of the project, click on the Project settings button.

  4. On the left, select Code signing from the menu.

  5. On the Android tab, click Add keystore file.

  6. In the dialog, drag-and-drop the file and fill out the required fields then click Continue

    keystore-alias.png

  7. Open the Workflow Editor.

  8. Add the Android Sign Step to your Workflow.

    If you uploaded your keystore file and filled out the metadata, the required inputs of the Step are already filled and require no more configuration from you.

    Prerequisite of the Android Sign Step

    Make sure to add the Android Sign Step after a build Step (Android Build Step or Gradle Runner Step) in your Workflow.

Creating a signed IPA for Xcode projectsClick to copy link​

Overview on iOS code signing in Bitrise

For a comprehensive overview on what Steps are available for code signing asset management, visit the iOS code signing page.

You can easily create a signed IPA file for your Xcode project with Bitrise.

Upload the distribution AND the development signing certificates

We strongly recommend uploading BOTH the development and distribution signing certificates for your project. If you don't have an uploaded development signing certificate, Steps with automatic provisioning options will generate one on the fly every time you start a build. This can eventually lead to reaching the maximum number of certificates, blocking you from starting new builds.

If you’re all set, proceed to setting up IPA export in your Workflow.

  1. Make sure the necessary code signing files have been collected and uploaded.

  2. Make sure you have the Xcode Archive & Export for iOS Step in your Workflow.

  3. Set the Distribution method input of the Step.

    xcode-archive.png

    The options are:

    • app-store: Choose this if you want to deploy the app to the App Store. Requires a Distribution certificate and an App Store provisioning profile.
    • ad-hoc: Choose this if you want to deploy the app to ad-hoc testers. Requires a Distribution certificate and an Ad Hoc provisioning profile.
    • enterprise: Choose this if you have an Apple Enterprise account and want to use that to distribute your app.
    • development: Choose this for internal testing. Requires a Developer certificate and a Development provisioning profile.

  4. Set the Automatic code signing input to the Apple service connection you want to use for code signing. The available options are:

  5. Save the Workflow, and start a new build.

That’s all. Xcode will automatically select the right signing files based on your project’s Bundle ID and Team ID settings, and the export method you set.

Signing an IPA file with a different team’s code signing fileClick to copy link​

You might want to sign the IPA file with a different team’s code signing files. For example:

  • If you use your company’s code signing files for internal builds, but your client’s code signing files are used for App Store distribution.
  • If you use Apple ID for automatic code signing and the Apple ID belongs to multiple teams, use The Developer Portal team to use for this export input to specify which team should be used for automatic code signing asset management.

To do so:

  1. Make sure the right code signing files of the new development team are uploaded to Bitrise.
  2. Set the The Developer Portal team to use for this export option as well (in addition to the Distribution method).
  3. Set the Distribution method.

Testing your React Native appClick to copy link​

You can use React Native’s built in testing method, called jest to perform unit tests.

  1. Log in to Bitrise and select Bitrise CI on the left, then select your project.

  2. Click the Workflows button on the main page.

  3. Add the run npm command Step to your Workflow.

  4. In the npm command with arguments to run input field, type test.

    Getting_started_with_React_Native_apps.png

For more detailed guides on React Native testing, check out Testing React Native apps.

Viewing React Native test resultsClick to copy link​

Bitrise allows you to view and analyze your test results in one convenient place: Deploying and viewing test results.

By default, tests run with the Run npm command Step won't show up in test reports. However, you can export the results. . The basic process is as follows:

  1. Generate a junit.xml file during the build.

    For example, you can use jest-junit to prepare a report.

  2. Add the Export test results to Test Reports Step to your Workflow.

    Managing_an_app_s_bitrise.png

  3. In the Path where custom test results reside input, add the folder in which your junit.xml file and other test results are located.

  4. In the Test result search pattern input, set *.xml.

  5. In the The name of the test input, set the name of the test run.

    The test results will be under this name.

  6. Make sure you have the Deploy to Bitrise.io Step in your Workflow.

Deploying a React Native appClick to copy link​

You can deploy your React Native app to:

  • bitrise.io: This allows you download the generated binary, and to share it with others via the public install page.
  • Online stores: we have integrations for multiple different online stores. In these guides, we'll show you how to publish to Google Play and to Apple's App Store.
CodePush

You can deploy updates to your users' devices with Bitrise CodePush. CodePush is part of Release Management and it is supported for React Native and Expo apps.

For more information about CodePush, check out the official guides: CodePush.

Deploying a cross-platform app to bitrise.ioClick to copy link​

The Deploy to bitrise.io Step uploads all the artifacts related to your build into the Artifacts tab on your Build’s page.

You can share the generated binary file (APK for Android or an IPA file for iOS) with your team members using the public install page. The public install page is a URL you can share with others who can install the generated app binary on their device. You can also notify user groups or individual users that your APK or IPA file has been built.

Publishing to expo.io

The Deploy to Bitrise.io Step does not use Expo commands and doesn’t publish to expo.io. This Step publishes artifacts to Bitrise and is not specific to a particular platform.

If you need to publish to expo.io, set the Run expo publish after eject? input of the Expo Eject Step to yes. Be aware that in that case you have to provide your username and password for your Expo account to publish to expo.io.

  1. Log in to Bitrise and select Bitrise CI on the left, then select your project.

  2. Click the Workflows button on the main page.

  3. Make sure you have the Deploy to bitrise.io Step in your Workflow.

  4. 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: Emails field with email addresses of the users you want to notify.

    Make sure you set those email addresses as Secrets! These details can be also modified under Notifications if you click the eye icon next to your generated binary in the Artifacts tab.

  5. If you want the Step to generate a public install page for you, set the Enable public page for the App? input to true.

Deploying the app to App Store ConnectClick to copy link​

Keep in mind that every time you want to push an app to App Store Connect, it must have a unique build and version number: increment either or both before deploying.

  1. Make sure you have a working connection to your Apple Developer account.

  2. Generate an IPA file on your own machine at least once.

  3. Upload all necessary code signing files to Bitrise.

    To deploy an app to App Store Connect, you need a Distribution type certificate and an App Store type provisioning profile.

  4. Make sure the Xcode Archive & Export for iOS Step is in your Workflow.

  5. Set the Automatic code signing input to the Apple service connection you want to use for code signing. The available options are:

  6. Set the Distribution method input of the Step to app-store.

    The Step will store the path of the exported .ipa file in the $BITRISE_IPA_PATH Environment Variable.

  7. Add the Deploy to App Store Connect Step to your Workflow.

  8. Fill the required inputs.

    • Either the app’s Apple ID or its Bundle ID is a required input. One of the two must be provided.
    • If you set the Submit for Review to yes, the Step will wait for your submission to be processed on App Store Connect and then submit the given version of the app for review.
    • The default value of the Skip App Version Update input is No. Change it only if you incremented the app version number in another way.
    • If you use an App Store Connect account that is linked to multiple teams, provide either a Team ID or a Team name!

  9. Start a build.

If all goes well, your app will be submitted to App Store and you can distribute it via Testflight or via the App Store!

Deploying your Android project to Google PlayClick to copy link​

You can use the Deploy to Google Play Step in your Workflow to upload your digitally signed AAB/APK to the Google Play Store.

  1. Make sure your Workflow includes the Android Build Step and that it runs before the Android Sign Step.

  2. Configure code signing for your app.

  3. Configure Google Play access.

    You only need to do this for your very first Google Play deployment of the app.

  4. Make sure you have the Deploy to Google Play Step after the Android Sign Step in your Workflow.

  5. 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 Env Var which contains your uploaded service account JSON key. For example: $BITRISEIO_SERVICE_ACCOUNT_JSON_KEY_URL.
    • 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).