# Getting started with React Native projects

:::tip[Expo projects]

If you use Expo in a React Native project, we have a dedicated guide: [Getting started with Expo projects](/bitrise-ci/getting-started/quick-start-guides/getting-started-with-expo-projects).

:::

You can easily set up and configure your React Native project on [Bitrise](https://app.bitrise.io/users/sign_in). 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.

:::note[Do you have a Bitrise account?]

Make sure you have signed up to [bitrise.io](https://www.bitrise.io) and can access your Bitrise account. There are multiple ways of registering an account:

- [Signing up with email](/bitrise-platform/getting-started/signing-up-for-bitrise#signing-up-with-email)
- [Signing up with a Git provider](/bitrise-platform/getting-started/signing-up-for-bitrise#signing-up-with-a-git-provider)

:::

## Adding a React Native project to Bitrise

Add your project the same way as any other: see [Adding a new project](/bitrise-ci/getting-started/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 project

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](/bitrise-ci/getting-started/quick-start-guides/getting-started-with-expo-projects) for that flow.

### What you can configure

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 dependencies

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:

:::note[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.
1. Click the **Workflows** button on the main page.
1. Make sure your Workflow includes the **Run npm command** Step.
1. In **The 'npm' command with arguments to run** input variable, type `install`.

   ![Getting_started_with_React_Native_apps.png](/img/_paligo/uuid-021a140f-5b4c-697c-a5ac-4b5429ce1bab.png)

   :::tip[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 projects

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 project

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](https://reactnative.dev/docs/signed-apk-android#generating-an-upload-key).
1. 1. Open your project on Bitrise with a user that has the **Admin** [role on the project](/bitrise-platform/projects/roles-and-permissions-for-bitrise-ci), or a [custom role](/bitrise-platform/workspaces/collaboration-and-permissions-in-workspaces/custom-roles/custom-roles-overview) with the **Edit workflows** permission.
1. On the main page of the project, click on the **Project settings** button.
1. On the left, select **Code signing** from the menu.
1. On the **Android** tab, click **Add keystore file**.
1. In the dialog, drag-and-drop the file and fill out the required fields then click **Continue**

   ![keystore-alias.png](/img/_paligo/uuid-0b79fc48-3861-0744-0f53-53a6c65ffc2c.png)
1. Open the Workflow Editor.
1. 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.

   :::important[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 projects

:::note[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](/bitrise-ci/code-signing/ios-code-signing/creating-a-signed-ipa-for-xcode-projects).

:::

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

- You have set up [Apple service connection](/bitrise-platform/integrations/apple-services-connection/about-connecting-to-apple-services) on Bitrise.
- Your [code signing files are managed correctly](/bitrise-ci/code-signing/ios-code-signing/creating-a-signed-ipa-for-xcode-projects).
- You set the relevant inputs of our **Xcode Archive & Export for iOS** Step.

:::important[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.

**Workflow Editor**

1. Make sure the necessary [code signing files have been collected and uploaded](/bitrise-ci/code-signing/ios-code-signing/managing-ios-code-signing-files---automatic-provisioning#uploading-ios-code-signing-certificates-to-bitrise).
1. Make sure you have the **Xcode Archive & Export for iOS** Step in your Workflow.
1. Set the **Distribution method** input of the Step.

   ![xcode-archive.png](/img/_paligo/uuid-fced107c-9b69-e5af-1472-4d96fbada364.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.
1. Set the **Automatic code signing** input to the Apple service connection you want to use for code signing. The available options are:

   - `off` if you don’t use automatic code signing.
   - `api-key` [if you use API key authorization](/bitrise-platform/integrations/apple-services-connection/about-connecting-to-apple-services).
   - `apple-id` [if you use Apple ID authorization](/bitrise-platform/integrations/apple-services-connection/about-connecting-to-apple-services).
1. Save the Workflow, and start a new build.

**Configuration YAML**

1. Make sure all the [necessary code signing files](/bitrise-ci/code-signing/ios-code-signing/creating-a-signed-ipa-for-xcode-projects) are available for your build.
1. Open the `bitrise.yml` file of your app.
1. Make sure you have the `xcode-archive` Step in your Workflow.

   ```yaml
   my-workflow:
     steps:
     - xcode-archive:
         inputs:
   ```
1. Set the `distribution_method` input to the correct value. The available 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.

   ```yaml
   my-workflow:
     steps:
     - xcode-archive:
         inputs:
         - distribution_method: development
   ```
1. Set the `automatic_code_signing` input to the Apple service connection you want to use for code signing. The available options are:

   - `off` if you don’t do automatic code signing.
   - `api-key` [if you use API key authorization](/bitrise-platform/integrations/apple-services-connection/about-connecting-to-apple-services).
   - `apple-id` [if you use Apple ID authorization](/bitrise-platform/integrations/apple-services-connection/about-connecting-to-apple-services).

   ```yaml
   my-workflow:
     steps:
     - xcode-archive:
         inputs:
         - automatic_code_signing: api-key
         - distribution_method: development
   ```

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 file

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.
1. Set the The Developer Portal team to use for this export option as well (in addition to the **Distribution method**).
1. Set the **Distribution method**.

## Testing your React Native app

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.
1. Click the **Workflows** button on the main page.
1. Add the **run npm command** Step to your Workflow.
1. In the **npm command with arguments to run** input field, type `test`.

   ![Getting_started_with_React_Native_apps.png](/img/_paligo/uuid-f5f86a6c-d609-1970-a451-0de6d5b4edb3.png)

For more detailed guides on React Native testing, check out [Testing React Native apps](/bitrise-ci/testing/testing-react-native-apps/running-detox-tests-on-bitrise).

### Viewing React Native test results

Bitrise allows you to view and analyze your test results in one convenient place: [Viewing test results](/bitrise-ci/testing/test-reports/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](https://www.npmjs.com/package/jest-junit) to prepare a report.
1. Add the **Export test results to Test Reports** Step to your Workflow.

   ![Managing_an_app_s_bitrise.png](/img/_paligo/uuid-fd13332e-571f-e706-88ed-a20a29db7aea.png)
1. In the **Path where custom test results reside** input, add the folder in which your `junit.xml` file and other test results are located.
1. In the **Test result search pattern** input, set `*.xml`.
1. In the **The name of the test** input, set the name of the test run.

   The test results will be under this name.
1. Make sure you have the **Deploy to Bitrise.io** Step in your Workflow.

## Deploying a React Native app

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.

:::note[CodePush]

You can deploy updates to your users' devices with Bitrise CodePush. CodePush is part of [Release Management](/release-management) and it is supported for React Native and Expo apps.

For more information about CodePush, check out the official guides: [CodePush](/release-management/codepush/about-codepush).

:::

### Deploying a cross-platform app to bitrise.io

The **Deploy to bitrise.io** Step uploads all the artifacts related to your build into the [**Artifacts**](/bitrise-ci/run-and-analyze-builds/managing-build-files/build-artifacts-online) 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.

:::important[Publishing to expo.io]

The **Deploy to Bitrise.io** Step does not use Expo commands and doesn’t publish to [expo.io](https://docs.expo.dev/workflow/publishing/). This Step publishes artifacts to Bitrise and is not specific to a particular platform.

If you need to publish to [expo.io](https://docs.expo.dev/workflow/publishing/), 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.](http://expo.io/)

:::

1. 1. Log in to Bitrise and select **Bitrise CI** on the left, then select your project.
1. Click the **Workflows** button on the main page.
1. Make sure you have the **Deploy to bitrise.io** Step in your Workflow.
1. 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](/bitrise-ci/configure-builds/secrets)! These details can be also modified under **Notifications** if you click the **eye** icon next to your generated binary in the **Artifacts** tab.
1. 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 Connect

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](/bitrise-ci/run-and-analyze-builds/build-numbering-and-app-versioning) before deploying.

1. Make sure you have a working [connection to your Apple Developer account](/bitrise-platform/integrations/apple-services-connection/about-connecting-to-apple-services).
1. Generate an IPA file on your own machine at least once.
1. [Upload all necessary code signing files](/bitrise-ci/code-signing/ios-code-signing/creating-a-signed-ipa-for-xcode-projects) to Bitrise.

   To deploy an app to App Store Connect, you need a Distribution type certificate and an App Store type provisioning profile.
1. Make sure the **Xcode Archive & Export for iOS** Step is in your Workflow.
1. Set the **Automatic code signing** input to the Apple service connection you want to use for code signing. The available options are:

   - `off` if you don’t use automatic code signing, or if you exclusively use Step inputs for Apple service authentication.
   - `api-key` if you use [API key authorization](/bitrise-platform/integrations/apple-services-connection/about-connecting-to-apple-services).
   - `apple-id` if you use [Apple ID authorization](/bitrise-platform/integrations/apple-services-connection/about-connecting-to-apple-services).
1. 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.
1. Add the **Deploy to App Store Connect** Step to your Workflow.
1. 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!
1. 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 Play

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.
1. [Configure code signing](/bitrise-ci/getting-started/quick-start-guides/getting-started-with-react-native-projects#signing-your-android-project) for your app.
1. [Configure Google Play access.](/bitrise-ci/deploying/android-deployment/generating-and-deploying-android-app-bundles#setting-up-google-play-deployment-for-the-first-time)

   You only need to do this for your very first Google Play deployment of the app.
1. Make sure you have the **Deploy to Google Play** Step after the **Android Sign** Step in your Workflow.
1. 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).