React Native: How To Publish An Expo App To TestFlight + Debug Common Errors

By Jeff Lewis

Jeff Lewis
Level Up Coding

--

Do you have a React Native Expo App? Do you want to publish it to TestFlight for testing? Then this guide is for you.

Note: This guide assumes you have an Apple Developer Account as well as installed the Expo CLI through NPM. You will need both for this to work.

1. Preparing Your Project For Build

A. App.json

In the root of your project folder, there should already be an app.json file.

Note: The privacy can be listed as “public,” private”, or “unlisted.”

{
"expo": {
"name": "YOUR_NAME_HERE",
"slug": "YOUR_SLUG_HERE",
"privacy": "unlisted",
"sdkVersion": "32.0.0",
"platforms": [
"ios",
"android"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "YOUR_BUNDLE_IDENTIFIER_HERE"
}
}
}

B. Add App Icon

If there isn’t an icon added for your project, you will be presented with the following error:

Your application icon can't have transparency if you wish to upload your app to Apple Store.

To fix this, you will have to make a 1024x1024 icon in either Photoshop, Illustrator, Affinity, etc. The ideal icon size is 1024x1024 and when we build the app, Expo will generate the necessary smaller icons sizes.

Now that you have your 1024x1024 icon made, we will add it to the assets folder and correct the path of icon in app.json.

"icon": "./assets/icon.png",

C. Bundle Identifier (Apple Developer)

Your React Native Expo app will also lastly need a Bundle Identifier.

Note: As mentioned previously, this guide assumes you have an Apple Developer Account. You will not be able to create a Bundle Identifier without it. You will get the following error if your project is missing a Bundle Identifier:

Your project must have a bundleIdentifier set in app.json.

To fix this, navigate to and click on Certificates, Identifiers, & Profiles.

Then click on App IDs.

Click on the + button.

Then choose your App ID Suffix. The recommended suffix is com.domainname.appname

D. Bundle Identifier (Project)

Now that the Bundler Identifier has been created through your Apple Developer Account, you will need to add it to your app.json.

"ios": {
"supportsTablet": true,
"bundleIdentifier": "YOUR_BUNDLE_IDENTIFIER_HERE"
}

2. Build App (.IPA)

A. Build Command

Our App is now prepped to build an iOS IPA file using Expo. We will start by running the following command:

expo build:ios

B. Apple Developer Credentials + Optimize Images

In the terminal, you will asked to login using your Apple Developer credentials.

You will then be asked to generate credentials and/or optimize images. I left to these default and let them generate credentials and optimize images.

Your React Native Expo app build is now complete and is in the IPA format.

C. Download App Build (.IPA)

Once you App has completed building, you should receive the following message. With this url, we can download our built app (.ipa).

✔ Build finished.
Successfully built standalone app: YOUR_APP_URL

3. Add Expo Build to Xcode

A. Application Loader (Xcode)

In Xcode, select the Xcode menu, select the Open Developer Tool option, and select Application Loader. Here you can import & upload your .ipa file to iTunesConnect.

Once the Application Loader launches, you will be asked for your Apple ID + password. However, this isn’t your normal iCloud/Developer Account password. You will need to generate an App specific password or else you will get the following error:

Sign in with the app-specific password you generated. If you forgot the app-specific password or need to create a new one, go to appleid.apple.com

B. Generate App Specific Password (Apple ID)

You can generate an App Specific Password through you Apple ID, enter your credentials, and click on Generate Password.

You will then asked to create a Password Label (Nickname) and an App specific password will then be generated.

C. Add Bundle ID (App Store Connect)

If you don’t have a Bundle ID setup in App Store connect, you will get the following error:

No suitable application records were found. Verify your bundle identifier 'YOUR_BUNDLE_PROFILER_HERE' is correct.

To fix this, you will have to navigate to App Store Connect, where you will be asked again to enter your Apple ID username and password (Not the App specific password).

Click on My Apps.

Click on the + Sign and create a New App.

You will now have to enter the following information, as well as adding the correct Bundle ID.

D. Deliver Your App (Xcode)

You can now take your newly built .ipa file, selected it from Xcode’s Application Loader, and enter your Apple ID and app specific password.

4. Send TestFlight Invitation (App Store Connect)

While still in App Store Connect, click on your App and navigate to the TestFlight tab.

Choose if you want to add External Testers or Internal Testers by click on the sidebar.

To add a Tester, click on the + sign and enter the testers information and email address.

Note: The email took a long time for me to receive it (hours). I spent quite a bit of time on Stack Overflow trying to figure out what was wrong with my project, but it just took a really long time.

And that’s it! An invite to test your app will soon (This could take hours) be emailed to the testers to redeem the App.

5. Other Common Expo & Xcode Errors

A. Expo Error:

Cannot start a new build, as there is already an in-progress build.

Navigate to https://expo.io/builds, enter your credentials, and cancel the build in progress.

B. Expo Error:

connect ECONNREFUSED 127.0.0.1:19001

In your Terminal, enter expo start and then expo build:ios.

C. Expo Error:

No suitable application records were found. Verify your bundle identifier 'YOUR_BUNDLE_PROFILER_HERE' is correct.

This error is fixed in section 3. Add Expo Build to Xcode, part C. Add Bundle ID (App Store Connect).

D. Expo Error

Reason: No cert available to make provision profile against, raw: "Make sure you were able to make a certificate prior to this step"

E. Expo Error

Missing Push Notification Entitlement - Your app appears to register with the Apple Push Notification service, but the app signature’s entitlements do not include the “aps-environment” entitlement. If your app uses the Apple Push Notification service, make sure your App ID is enabled for Push Notification in the Provisioning Portal, and resubmit after signing your app with a Distribution provisioning profile that includes the “aps-environment” entitlement.

To fix this, you will have to run the following command to build a new version.

Note: If this is your second time building and submitting your application to Apple for TestFlight, you will have to update the Version in app.json.

expo build:ios --clear-provisioning-profile

F. Expo Error

Multiple profiles found with the name 'com.appName.appName AppStore'.  Please remove the duplicate profiles and try again."

To fix this, remove/revoke all existing Keys and Provisioning Profiles in your Apple Developer Account.

Then rerun expo build:ios — clear-provisioning-profile and let Expo generate all of the necessary files when building the .ipa.

G. Xcode Error (App.json)

ERROR ITMS-90189: "Redundant Binary Upload. You've already uploaded a build with build number '1' for version number '1.0.0'. Make sure you increment the build string before you upload your app to App Store Connect. Learn more in Xcode Help (http://help.apple.com/xcode/mac/current/#/devba7f53ad4)."

To fix this, go into your app.json file and increase the version number such as the following:

"version": "1.0.1",

--

--

Full stack React/React Native developer, environmentalist, and beach bum.