How to Deploy a React Native iOS App on the App Store?

We will take you through the steps of having your iOS apps ready to be published on the Apple App Store.

Before starting, ensure that you have a developer’s account for iOS.

Mobile App Launch Prerequisites

There are a few pieces of information that you need to have prepared when launching your mobile app on both the App Store and Google Play. They include:

• App Name: Short, catchy, unique, and relevant.
• App Description: Describe what your app is about while trying to populate the description with relevant keywords.
• App Screenshots: Use each screenshot to promote a key feature of your app, with the most important or valuable one first.
• App Version
• Bundle ID: The standard format is com.CompanyName.AppName (e.g. com.spotify.music)
• Developer/Publisher Profile

App Store Prerequisites

Some items that you have to prepare concretely for the App Store include:

•           App Icon: A 1024×1024 px icon with no transparency.

•           Keywords: You have 100 characters to choose as many pertinent keywords as you can, disunited by commas.

•           Countries: choose whether your app will be available ecumenical or in selected countries.

•           App Category: Pick an App store category and subcategory that best suit your app.

•           Copyright: ABCD Company Designation.

•           Test Account: A demo account engendered to be utilized by Apple during their review of your app. This account can be abstracted once your app has been approved.

Deploying a React Native iOS App into App Store

1: Get your React Native app ready to deploy

Create a fresh new project

For Creating a new project, you can use react-native init New Project

Existing Project

Cloning our app from git lab. Once the app is cloned now go to your_app root directory and run the command npm install.

Once the command npm install is executed prosperously then transmute the directory utilizing the cd ios command to the ios directory and run command pod install.

If both these commands are executed prosperously now it’s time to build our app.

2: Build the React Native app in XCode

Now open your project folder in Xcode and if you have configured firebase with your app then navigate to the ios directory and choose the file which has an extension. xcworkspace else choose .xcodeproj. Now it’s time to change some settings for our app behavior.

2.1 Update General settings

Click on the General tab and navigate to identity and update all the details. While updating details ascertain the bundle identifier should be veridical as mentioned in the project. In case you don’t know how to get the bundle identifier then navigate to the following directory project_name → ios → project_name.xcodeproj and open project. pbxproj and find PRODUCT_BUNDLE_IDENTIFIER in it.

Now navigate to Development Info here you can transmute the rudimentary functionality of your apps like portrait mode and landscape mode.

2.2 Update Capabilities If your app has push notification accommodations then select the Capabilities tab and turn ON to Background Mode and mark the check to Remote notification. And after it turns ON to Push Notification. If your app has more features like maps, then you can turn it ON or OFF here.

2.3 Change scheme if you want to build the app in developer mode

Once the initial settings are updated and if you optate to install the app in debug mode then navigate to the top of the Xcode and select Product → Scheme → Edit Scheme

Now change the Build configuration to Debug and do the same for the Test, Profile, Analyze and Archive tabs and close the popup.

2.4 Start the build

To build the app choose the Product from the top of the bar and navigate to Product → Build it will commence building the app and it will take little time to build the app.

2.5 Run the app in the emulator or real device

Once the build is prosperously built now if you optate to run the app in an emulator or authentic contrivance then navigate to the top right corner of the tab and choose your contrivance emulator or genuine contrivance (authentic contrivance should be connected to mac) then run the build by clicking the play button and the app will be going to launch in the respective contrivance.

3: Create App Id for your app in the Apple Developer account Authenticate to your developer account and choose Certificates, IDs & Profiles and then navigate to Identifiers → App IDs and click the integrate(add) button after that update your app name and click to perpetuate(continue).

As in our app, we are using push notifications so in App services, we marked checked the push notification and next click to continue.

4: Engender all the certificates for the app

In ios apps, two types of certificates are available Development and Engenderment both these certificates can be engendered from the keychain access in mac once the certificates are engendered then these certificates can be used here.

As we are utilizing Push Notifications accommodations in our app so we require to engender one separate certificate for Development and Engenderment for push notification accommodations. So to engender APN certificates follow the following steps.

4.1 For Development

4.1.1 Create certificates for Development

• The development certificate is autoloaded when we request for CSR (Certificate Signing Request) in keychain access so make sure you have downloaded the CSR from your keychain access account

4.1.2 To Create APN certificates for Development (if the app has pushed Notification accommodations) •           To engender the development APN certificate in the developer account navigate to Certificates → Development and click to integrate add button to engender an incipient certificate. In the Development, section selects APN (Apple Push Notification) and proceed to continue.

•           Now here choose the App ID here which we have engendered afore and proceed to continue.

•           In Engender section cull the CSR (Certificate Signing Request) file which can be found in the keychain access account after that proceed to perpetuate now the APN certificate can be downloaded.

4.2 For Production

4.2.1 Create certificates for Production

•           To engender the production certificate in the developer account, navigate to Certificates → production and click to integrate add button to engender an incipient certificate. In the production, section selects App Store and Hoc and proceed to continue.

 

4.2.2. Create APN certificates for Production (if the app has push notifications services)

• To create the production APN certificate in the developer account navigate to Certificates → Production and click to add a button to create a new certificate. In the Production, section selects APN (Apple Push Notification ) and proceed to continue.

Now select the App ID here that we have created before and proceed to continue.

5: Create Provisioning Profiles

To deploy the app on the app store we need to create Provisioning Profiles of the app for Development and Distribution so to create the provisioning profiles follow the following steps.

5.1 For Development Provisioning Profile

• To create a provisioning profile log in to your developer account and select the Certificates, Identifiers & Profiles tab after that navigate to Provisioning Profile → Development and click on to add button. Then in the development section select iOS App Development and proceed to continue.

• Now select a device if no devices are added before then these devices can be created from the Devices tab. In our case, we have selected the iPhone 5c

Once the device is selected then update the profile name and proceed to continue.

Provisioning profile for development is created successfully download it and double click on it so it will be saved in the keychain account.

5.2 For Distribution Provisioning Profile

• To create a distribution type provisioning profile navigate to Provisioning Profile → Distribution and click to add button. Then in the Distribution section select App Store and proceed to continue.

6: Release the app on the App Store in test flight mode

Now we are very proximate to deploying the app-on-App store. In-App store Test Flight is the mode where you can test your app in iPhone contrivance. In these following steps, we are going to relinquish our app-on-App store in test mode.

6.1 Create a New app in App Store Connect

Afore publishing the app we require you to engender the incipient app on App Store connect account so authenticate to your app store account and click to my app.

Now click on the plus icon from the top left corner and select the new incipient app after that select the bundle id for an app which we have engendered afore in the developer account

6.2 Rebuild the app with Xcode and update the build setting

• Open your project_name → ios → project_name.xcworkspace or(.xcodproj if you didn’t integrate firebase in project)file in Xcode and navigate to Build Setting Tab
• Now in Code Signing identity → Debug and Code Signing identity → Debug → Any iOS SDK select the Developer certificate which we have created before.

6.3 Archive the project

Now it’s time to archive the project so afore archive the project ascertains you have selected Generic iOS contrivance in the top left corner of your window once you have done then navigate to Product → Archive once the app is prosperously archived you will automatically get redirected to the Xcode Organizer window.

6.4 Upload App in Test Flight

•           Once the app is prosperously archived you will optically discern a list of apps with the version in Xcode Organizer cull this app and click on the Distribute App.

• Now you’ll see methods of distribution select the iOS App Store and click on next

Now here you will see two methods Upload or export as we are going to upload the app so select upload and click next.

Now it’s time to select certificates that we have created before as we are going to distribute this app on production so here we need to select two certificates one for distribution and another one for production. So in the Distribution certificate select your distribution certificates.

Once you clicked next it will take a little bit of time to identify your certificates and after that, you will see little details of your app which we are going to upload to the app store.

Now click Upload to upload your app on App Store and it will take scarcely time to upload the app on the app store. Once the app is uploaded click on done and now it’s time to authenticate in the App Store or iTunes account.

Once your app is uploaded on a test flight after that authenticate to your app store account and click My Apps and navigate to your app → Test Flight and here you will optically discern your app with a processing tag.

Now a pop-up will appear which will ask you about Export Compliance Information in our case we didn’t have any encryption features so select no and click on Start Internal Testing and the app is going to be available on testing mode. You can test your app with a test flight app available on the App store and to test this app you need to add testers for this particular app on your App store account after that you can test your app.

7: Move Your App from Test Flight to Production

So now it’s time to move your app to production so your app will be going to available for your users following are the steps that how you can move your app from a test flight to production.

• First login to your App Store account and navigate to My App → Your App and click on App Store Tab.

7.1 If you are uploading a fresh App on App Store

• If you are Uploading your app first time then you will see 1.0 Prepare for Submission in the left sidebar under iOS App click on it

7.2 If you want to update your App version (Skip for Fresh App)

• If you have uploaded your app to production before and want to update your app then click on VERSION OR PLATFORM and a pop-up will appear with two options select iOS.
• Now enter the new version of your app and click on create. Now you will find Prepare for Submission tab with your version click on it

7.3 Fill out App details and select build

• Here you will see a screen where you have to fill out all the information about the app.
• So it’s time to select the build which we have uploaded on a test flight. Scroll down and you will find a Build tab click on Select a build before you submit your app and a pop-up will appear with all the uploaded apps on a test flight.

7.4 Version release

Once you fill out all the details of the app then in the version release tab you can choose how you want to release your app.

7.5 Submit For Review

So now it’s time to submit your app click on the Save button and after that click on Save for Review from the top right corner.

After that app store will ask you that is your app has advertisements or not after selecting it click on Submit for review and your app is under review now. Now times are taken in the review process depending on the App store. Once your app is reviewed successfully then the app is going to be moved to production.