Quickly build a React Native Project on TestFlight

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.

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.

Setup fastlane for your project

Fastlane 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

xcode-select --install
brew install fastlane

Prerequisites

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

• Install all required dependencies, with Xcode 9 or higher
• Choose the bundle identifier 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 [e-mail]) 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
  

  # 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 and follow this tutorial 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

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

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.

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

# 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

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).

fastlane beta

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

Comments

[Raja MSR]

Thomas provides a concise and practical guide for setting up a React Native app and distributing it via TestFlight to beta testers. His emphasis on streamlining the iOS app building process and gathering valuable feedback is commendable. 🚀

How do you handle screenshots for your React Native app during the beta testing phase? 🤔

[Thomas Heniart]

Hi Raja, thanks a lot for your comment!
To be honest, I still didn't use the screenshot upload functionality because one of our guys in marketing does it and uploads them directly on the AppStore.