Your Application Icon Cant Have Transparency if You Wish to Upload Your App to Apple Store.

أبريل 13, 2022 إرسال تعليق

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

By Jeff Lewis

Do you take a React Native Expo App? Do yous desire to publish it to TestFlight for testing? Then this guide is for you.

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

one. Preparing Your Project For Build

A. App.json

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

Note: The privacy can exist listed as "public," individual", or "unlisted."

          {
            "expo": {
            "name":            "YOUR_NAME_HERE",
            "slug":            "YOUR_SLUG_HERE",
            "privacy": "unlisted",            
            "sdkVersion": "32.0.0",
            "platforms": [
            "ios",
            "android"
            ],
            "version": "i.0.0",
            "orientation": "portrait",
            "icon": "./assets/icon.png",
            "splash": {
            "prototype": "./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 exist presented with the post-obit error:

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

To set 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 take your 1024x1024 icon made, nosotros will add information technology to the assets binder and right the path of icon in app.json.

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

C. Package Identifier (Apple tree Developer)

Your React Native Expo app volition besides lastly need a Bundle Identifier.

Notation: As mentioned previously, this guide assumes you have an Apple Developer Account . Y'all volition non be able to create a Bundle Identifier without it. You lot will get the following mistake if your project is missing a Parcel Identifier:

          Your project must accept a bundleIdentifier fix in app.json.

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

Then click on App IDs.

Click on the + button.

And then cull your App ID Suffix. The recommended suffix is com.domainname.appname

D. Package Identifier (Projection)

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

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

two. 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 tree Developer Credentials + Optimize Images

In the terminal, y'all will asked to login using your Apple Developer credentials.

Yous 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 edifice, y'all should receive the following message. With this url, we can download our built app (.ipa).

          ✔ Build finished.
Successfully congenital standalone app:            YOUR_APP_URL

3. Add Expo Build to Xcode

A. Application Loader (Xcode)

In Xcode, select the Xcode bill of fare, select the Open up Developer Tool selection, and select Application Loader. Hither yous can import & upload your .ipa file to iTunesConnect.

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

          Sign in with the app-specific password you lot generated. If you forgot the app-specific countersign or demand to create a new i, go to appleid.apple tree.com

B. Generate App Specific Countersign (Apple ID)

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

You will so asked to create a Countersign Label (Nickname) and an App specific countersign will then be generated.

C. Add Bundle ID (App Store Connect)

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

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

To set this, you volition take to navigate to App Store Connect , where y'all will exist asked again to enter your Apple tree ID username and password (Not the App specific password).

Click on My Apps.

Click on the + Sign and create a New App.

Yous will at present have to enter the following information, besides as adding the correct Packet 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.

four. Ship TestFlight Invitation (App Store Connect)

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

Choose if you desire 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.

Annotation: The electronic mail took a long time for me to receive information technology (hours). I spent quite a bit of fourth dimension on Stack Overflow trying to figure out what was incorrect with my projection, simply it just took a actually long time.

And that'due south it! An invite to test your app volition soon (This could have hours) exist emailed to the testers to redeem the App.

five. Other Common Expo & Xcode Errors

A. Expo Fault:

          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 Fault:

          connect ECONNREFUSED 127.0.0.1:19001

In your Last, enter expo first and and so expo build:ios.

C. Expo Mistake:

          No suitable awarding records were establish. Verify your parcel identifier 'YOUR_BUNDLE_PROFILER_HERE' is right.

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

D. Expo Error

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

East. Expo Mistake

          Missing Push button Notification Entitlement - Your app appears to register with the Apple Push Notification service, but the app signature's entitlements do non include the "aps-environment" entitlement. If your app uses the Apple Push Notification service, brand sure your App ID is enabled for Push Notification in the Provisioning Portal, and resubmit afterwards signing your app with a Distribution provisioning profile that includes the "aps-environment" entitlement.

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

Annotation: 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 Mistake

          Multiple profiles found with the proper 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 Programmer Business relationship.

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

G. Xcode Fault (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 than in Xcode Help (http://assistance.apple.com/xcode/mac/electric current/#/devba7f53ad4)."

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

          "version": "one.0.1",

mitchellmougge.blogspot.com

Source: https://levelup.gitconnected.com/react-native-how-to-publish-an-expo-app-to-testflight-debug-common-errors-90e427b4b5ea

Mitchell Mougge