Y'all have created an crawly app and you lot're finally ready to Beta test the app on iOS, astonishing! The last matter remaining is just preparing the application for submission to TestFlight. From ain feel, I know that this isn't equally simple every bit it might seem. Especially if you don't have previous experience with iOS development and Xcode.

When I first attempted to deploy a React Native app to TestFlight, I didn't actually understand how the process worked. I tried following some tutorials, who all had different processes and dissimilar recommendations. After gaining more feel with publishing apps, I decided to create my own step-by-step tutorial to provide some guidance for other showtime time publishers.

Goals

This tutorial will take you through a footstep-by-footstep guide on how you can prepare and publish a React Native app, created with the React Native CLI react-native init, to TestFlight. We'll be using Fastlane which is an open source platform that simplifies the deployment process. The setup of Fastlane is quick and easy, and when it's in place you can build and deploy your React Native app using only a single line of code. I can hope, it'due south worth the fourth dimension!

Prerequisites

This is non a guide on how to build a React Native application, or how to solve any errors you might take during the development procedure. Make certain that your app is working and gratis from errors before continuing the tutorial.

This tutorial is aimed for projects created using the React Native CLI react-native init and not Expo. In order to upload your React Native app to TestFlight, yous'll demand a paid membership for Apple Programmer Program. Lastly, we'll be using a private Github repository for storing certificates.

Apple tree Developer

Nosotros'll begin the process by registering the app to a Apple tree Developer account. Fastlane will build and submit the React Native project to the app that we create there. Get to developer.apple.com and login into your account. If you don't have one, yous'll need to create one.

Unique App ID

First, we'll need to create a new identifier for the awarding. We'll create an App ID which uniquely identifies one or more apps created by a unmarried evolution team. Navigate to the Certificates, Identifiers & Profiles folio and go to the Identifiers tab. Create a new identifier by clicking on the "+" icon. Yous should see a list of different types of IDs to select, as the prototype below. Select App IDs and click on keep.

Different types of IDs

The App ID is a two-part cord which consists of a Team ID and a bundle ID. The Team ID is automatically set by Apple and is unique to a specific development team. The bundle ID should exist unique for the app and we'll demand to create it ourselves. Let's do so and make full in the residue of the information in order to finish the registration of the App ID. The information that we need to fill in is:

Register App ID

  1. Platform - Choose "iOS, tvOS, watchOS".
  2. Description - Add together a description of your application and/or development team.
  3. Parcel ID - Choose "Explicit" and create a unique packet ID which volition place your application. The recommended approach is to use com.domainname.appname. If you don't have a domain proper name or a company name, y'all use your name instead.
  4. Capabilities - Here, y'all can select a range of technologies to employ in your App. For this one, we won't be selecting whatsoever.

With all the information filled in, you can click on continue so finish the registration past clicking on annals. Nosotros now accept a registered App ID that uniquely identifies our app and we're fix to move to the next step.

App Store Connect

It's now time to register our new app within the App Store Connect. Login to App Shop Connect and navigate to My Apps. Once you're logged in, add a new app by clicking on the "+" icon in the top lefter corner and select New App. This opens a modal with some fields for us to make full in.

Creating new app in App Store Connect

  1. Platforms - Choose iOS
  2. Name - Enter the proper name of your app
  3. Master Language - Choose the principal language used in the app
  4. Parcel ID - Select the parcel ID that we created in previous section.
  5. SKU - The SKU should be something unique for the app. I usually choose the the bundle ID but tin be anything you like.
  6. User Access If y'all have multiple team members yous tin choose to limit the app admission of the app to sure members.

Once you lot've filled in all the information, click on create to create the app. Earlier we proceed to the Xcode setup, we'll demand to add an bodily iOS device.

Notation: Adding a iOS device is required to be able to deploy your awarding to TestFlight for Beta testing.

Add iOS Device

We'll be calculation a device through the Apple Developer page. From the main dashboard (make certain you lot're logged in), navigate to the Devices tab which you lot'll notice in the left menu. Printing the "+" to register a new device. You will demand to enter some information.

  1. Platform - Choose iOS, tvOS, watchOS
  2. Device Name - Enter a name for the device you'll add.
  3. Device ID (UDID) - You can find the UDID by connecting your phone to your Mac and and so going into iTunes. Click the phone icon to open upwardly the information near your device. To view the UDID, yous tin click on Serial Number which then changes and shows the UDID of your device.

We're now fix to proceed to Xcode.

Xcode Setup

To prepare our project for Beta deployment we'll need to make some changes inside the projects Xcode workspace. You tin can find the file inside the /ios folder with the proper noun of yourprojectname.xcworkspace. This will open the workspace with Xcode.

Within Xcode, click on your Xcode project in the left menu and the General tab in the top. Here we demand to make some changes under the three sections:

  1. Identity - Update the Packet Identifier with the packet ID that we created earlier.
  2. Signing - Make sure that Automatically manage signing is enabled. So, choose your team. If you don't see it there, click on Add an account and sign in to your Apple tree developer account.
  3. App Icons and Launch Images - Y'all'll need to add an app icon, otherwise you'll run into an error afterward on. Yous can use Make App Icon to easily generate all the different sizes. To add the icons, click the arrow to the right of App Icons Source.

Xcode workspace

We're now ready to outset setting up Fastlane.

Fastlane Setup

The setup of Fastlane requires a few steps. We'll be following the official Fastlane Docs.

First, we'll make sure that we have the latest Xcode control tools. Open your concluding and run the following command.

Next, we install Fastlane which you can do with RubyGems or Homebrew. The recommended installation method is with RubyGems so that'due south what we'll stick to. If you lot don't have it installed, I'd recommend using a surround manager such as rbenv.

                          # Using RubyGems              sudo              gem              install              fastlane -NV

Fastlane Init

Once we take fastlane installed, nosotros need to configure information technology inside the /ios folder of our React Native application. Inside the terminal, navigate to the /ios folder inside your project and run the command.

When running this command, you'll exist taken through some steps.

  1. What would you similar to utilise fastlane for? - Fastlane handles unlike tasks only we're interested in the 2nd: Automate beta distribution to TestFlight. Type 2 and hit Enter.
  2. Select Scheme - Choose the showtime 1 which is your project name (Non projectname-tvOS). Blazon ane and hit Enter.
  3. Login to your Apple Developer account - Enter your Apple ID username (the electronic mail you used to create your account).

After you've finished the steps, Fastlane has been initialized in your project. You should now come across some addtions inside the /src binder. Fastlane automatically adds a new folder /fastlane with two files:

  • Appfile - Stores useful data used for deployment, like the Apple ID and bundle identifier.
  • Fastfile - Stores the automation configuration for the tasks we can run with the fastlane command. There's some code generated inside this file for the states, we'll go through this later.

It also adds a Gemfile which defines the fastlane version along with it's dependencies. With the Gemfile in place, we can run bundle exec fastlane [lane] which volition speed up the process, nosotros'll employ this later.

Before we move on, we also need to configure some environment variables to foreclose future errors during build. We'll be adding two lines of code to ~/.bash_profile. Run the following lawmaking to open the text editor.

Inside, we can add together the two lines which are required for fastlane to work properly.

                          export                              LC_ALL                            =en_US.UTF-8              export                              LANG                            =en_US.UTF-8

Code Signing

The next footstep is to setup the configuration for code signing. If you're new to this concept, code signing is a method to ensure the user that the app is from a known sources and hasn't been inverse since it was signed by the author. This is done by verifying the author through a certificate-based digital signature.

Nosotros'll be code signing our app using the match activeness which is part of Fastlane. When using match, all the required certificates and provisioning profiles will be created and stored inside a separate and private Git repo. It can also exist stored within Google Cloud but we'll be using a git repo in this tutorial.

Notation: By storing the credentials inside a split git repo, everyone with access to the repo can use the credentials for lawmaking signing. This is useful especially for evolution teams as it simply requires one code signing identity instead of one for each programmer.

First we demand to create a new and private git repo to shop the credentials. Go to GitHub or your preferred platform, and re-create the url to the repo as you'll be asked to enter this soon.

At present we tin start using lucifer by running the following control, still inside the /ios folder. We're using bundle exec as mentioned earlier (this requires a Gemfile). Before running match, information technology'south recommended to articulate whatever previous certificates with the nuke command.

            bundle              exec              fastlane lucifer init

You'll exist asked to choose between git or google_cloud. Choose git by entering one followed by pressing Enter. Then y'all're asked for the url to the private git repo y'all created for storing the credentials. Add the url and hit Enter to finish the setup.

This will create a Matchfile within the /fastlane folder which volition store information about the git repo that yous provided. We tin now generate new certificates and profiles using match. In order to deploy your app to TestFlight, y'all'll demand a iOS Distribution document. To create one, run the following command in your terminal.

            bundle              exec              fastlane match appstore

This will create a new certificate and provisioning profile and store them within your private git repo. We'll besides create a developer certificate, which is used for when testing the app with Xcode on a physical device.

            package              exec              fastlane match evolution

When running these commands, the match action will create the certificates and upload them to the git repo.

Fastfile

With our certificates created, the last thing left is to tell Fastlane to code sign using the iOS Distribution certificate that we created. When we ran fastlane init, the Fastfile file was created for united states along with some code. Inside this file, we'll be coding our lane which is a group of deportment that will be executed synchronously to automate the Beta deployment process. Open the Fastfile within the /fastlane binder.

            default_platform(:ios)              platform :ios              practice              desc              "Push button a new beta build to TestFlight"              lane :beta              practice              increment_build_number(xcodeproj:              "YourProjectName.xcodeproj"              )              build_app(workspace:              "YourProjectName.xcworkspace", scheme:              "YourProjectName"              )              upload_to_testflight   end end

We beginning by setting the default platform to iOS and then create a lane which will exist run for iOS platform only. The desc let's us add a description of the lane. Then we create the actual lane called beta. Inside, we define a ready of actions which performs some tasks for u.s.a..

  • increment_build_number - Increments the build number each time we upload the project. This is a requirement when uploading to TestFlight.
  • build_app - Builds the app, where we too specify the path to the workspace file and the project's scheme.
  • upload_to_testflight - Uploads the app to TestFlight.

Earlier we're ready to submit the app to TestFlight, we'll demand to add the code signing we setup earlier. This can easily be achieved by using the sync_code_signing action and specifying that we're using the appstore certificate.

            platform :ios              do              desc              "Push a new beta build to TestFlight"              lane :beta              do                              sync_code_signing(type:                "appstore"                )                            increment_build_number(xcodeproj:              "YourProjectName.xcodeproj"              )              build_app(workspace:              "YourProjectName.xcworkspace", scheme:              "YourProjectName"              )              upload_to_testflight   cease terminate

Deploying to TestFlight

We're now prepare to deploy the app to App Shop and TestFlight. With a single line of code, we tin can upload the app to TestFlight. Brand sure you're still in the /ios binder and run the following.

            bundle              exec              fastlane beta

The build and deployment volition accept some fourth dimension. If y'all don't encounter whatever errors, you should eventually come across your congenital app in App Store Connect.

Wrapping Up

Deploying a React Native app to TestFlight can be hard, but I promise this step-by-footstep guide has helped you with the process. Using Fastlane volition crave some initial setup just information technology's definitely worth it equally you lot can build and deploy your app with a unmarried line of lawmaking.

Thanks for your fourth dimension!