Quickly build a React Native Project on TestFlight
Tags: reactnative, ios, tutorial, devops
Published: 2023-11-16 21:59:39

This tutorial aims to guide you through the process of setting up a React Native app and distributing a build on TestFlight for your beta testers. The primary objective is to reduce the time spent on iOS app building and simplify the gathering of valuable feedback from your beta testers. By following the instructions provided in this tutorial, you will be able to swiftly deploy your app on TestFlight and effectively collect feedback to enhance your app prior to its official release.

# Create your react native project

To get started, it's important to first follow the instructions provided at https://reactnative.dev/docs/environment-setup. These instructions will guide you through the process of setting up your environment and ensuring that you have all the necessary requirements in place before diving into the project.

```bash
npm uninstall -g react-native-cli @react-native-community/cli
npx react-native@latest init AwesomeProject
cd AwesomeProject
```

To verify that your app is working on your simulator, follow the steps outlined in [this link](https://reactnative.dev/docs/environment-setup#running-your-react-native-application).

# Setup fastlane for your project

[Fastlane](https://fastlane.tools/) is an open-source platform designed to simplify Android and iOS deployment. It allows you to automate every aspect of your development and release workflow.

## Installation

```bash
xcode-select --install
brew install fastlane
```

## Prerequisites

Before proceeding, please make sure that you fulfill the following criteria:

- Install all [required dependencies](https://reactnative.dev/docs/environment-setup), with Xcode 9 or higher
- Choose the [bundle identifier](https://cocoacasts.com/what-are-app-ids-and-bundle-identifiers/) for your app. For the purposes of the following steps, I will use `org.awesome.AwesomeProject`.
- An Apple ID with an admin or developer user, with its username (email, for example `dev-team@yourcompany.com`) and password
- An App-Specific Password : Go to https://appleid.apple.com/account/manage, login, and then go to App-Specific Passwords, from here, generate a new App-Specific Password and copy it (keep it safe)
- Your app name, Fastlane will automatically create your application in the Developer Portal and App Store
- Another Git repository associated with this project. It will be utilized to store the `fastlane match` configuration.
- Use below right **.gitignore** inside the `ios` directory
    
    ```bash
    # fastlane env
    fastlane/.env
    
    # fastlane specific
    fastlane/report.xml
    
    # deliver temporary files
    fastlane/Preview.html
    
    # snapshot generated screenshots
    fastlane/screenshots
    
    # scan temporary files
    fastlane/test_output
    
    # fastlane builds
    builds/*
    *.xcarchive
    ```
    
- You also need to create an App Icon to use Fastlane or you will get an error on running `fastlane beta`. You can simply create one using the website [MakeAppIcon](https://makeappicon.com/) and follow [this tutorial](https://aboutreact.com/react-native-change-app-icon/) to configure it properly.

Open your Xcode project (double click on **AwesomeProject.xcodeproj**) and modify some information:

- In the `General` tab, `Identity` section, change the `Bundle Identifier` to your identifier (useful for Fastlane)
- In the `Signing & Capabilities` tab, `Signing` section, disable `Automatically manage signing`
- In the `Build Settings` tab, set view filter on top to `All` and `Combined`, then go to the `Signing` section and into `Code Signing Identity`, set `Apple Development` for the `debug` line (including `Any iOS SDK` also) and set `Apple Distribution` for the `release` line (including `Any iOS SDK` also).

Like this:

| Code Signing Identity | < Multiple values > |
| --- | --- |
| Debug | Apple Development |
| Any iOS SDK | Apple Development |
| Release | Apple Distribution |
| Any iOS SDK | Apple Distribution |

## Setup

### Init

```bash
cd ios
fastlane init
```

Fastlane will autonomously identify your project and prompt you for any missing details. 

When prompted with the question, "What would you like to use Fastlane for?" select option 2, which is "Automate beta distribution to TestFlight.”

### Signing and certificates

```bash
fastlane match init
```

You will be prompted to specify a Git repository. Supply the previously created repository dedicated to configuration storage for this purpose.

Now, let's dive into the sanitation and generation of your Apple ID certificates using the commands provided below.

```bash
fastlane match nuke development
fastlane match nuke distribution
fastlane match nuke enterprise

fastlane match appstore
fastlane match development
fastlane match adhoc
```

Then, make some adjustments to the files generated in the init step to include the signing configuration

***AwesomeProject/ios/fastlane/Fastfile***

```ruby
# This file contains the fastlane.tools configuration
# You can find the documentation at https://docs.fastlane.tools
#
# For a list of all available actions, check out
#
#     https://docs.fastlane.tools/actions
#
# For a list of all available plugins, check out
#
#     https://docs.fastlane.tools/plugins/available-plugins
#

# Uncomment the line if you want fastlane to automatically update itself
# update_fastlane

default_platform(:ios)

platform :ios do
  desc "Push a new beta build to TestFlight"
  lane :beta do
    increment_build_number(xcodeproj: "AwesomeProject.xcodeproj") # Path to xcodeproj
    get_certificates( # Create or get certificate, and install it
      output_path: "./builds" # Download certificate in the build folder (you don't need to create the folder)
    )
    get_provisioning_profile( # Create or get provisioning profile
      output_path: "./builds",  # Download provisioning profile in the build folder
      filename: "provisioning.mobileprovision" # Rename the local provisioning profile
    )
    update_project_provisioning( # Set the project provisioning profile (related in Xcode to the General > Signing Release section)
      xcodeproj: "AwesomeProject.xcodeproj", # Path to xcodeproj
      target_filter: "AwesomeProject", # Name of your project
      profile: "./builds/provisioning.mobileprovision",
      build_configuration: "Release"
    )
    update_project_team( # Set the right team on your project
      teamid: CredentialsManager::AppfileConfig.try_fetch_value(:team_id)
    )
    build_app(
      workspace: "YeetipMobile.xcworkspace",
      scheme: "YeetipMobile",
      clean: true,
      export_method: "app-store",
      export_options: {
        provisioningProfiles: {
            CredentialsManager::AppfileConfig.try_fetch_value(:app_identifier) => CredentialsManager::AppfileConfig.try_fetch_value(:app_identifier) + " AppStore" # Value of this parameter is the name of the Provisioning Profile. By default, it will be "{bundleId} AppStore"
        }
      },
      build_path: "./builds",
      output_directory: "./builds"
    )
    changelog_from_git_commits
    upload_to_testflight
  end
end
```

***AwesomeProject/ios/fastlane/.env***

```bash
FASTLANE_USER=<AppleID>
FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD=<App-Specific Password>
```

# Build for TestFlight

It's time to build! Simply execute below command in the `ios` folder (it might take a few minutes).

```bash
fastlane beta
```

After your beta build is published on TestFlight, navigate to **[https://appstoreconnect.apple.com/apps](https://appstoreconnect.apple.com/apps) > AwesomeProject > TestFlight** to confirm your build has been shipped successfully.