React Native is a great cross-platform development tool with benefits like smart debugging tools and error-reporting features. Developers can take advantage of all its benefits to create high-functioning apps for Android and iOS devices. On the other hand, React Native has one downside: it doesn’t automate the app deployment process to Android or iOS stores. Therefore, this article is a step-by-step guide to assist developers with preparing their Android and iOS apps for publishing on both stores. To provide a detailed understanding of the steps, we cover the following in this article: Requirements for Launching Mobile Apps, Steps for Building Native Apps, Building an Android and iOS App using Expo, and How to Publish an Expo App on iOS and Android PlayStore.
React Native is a great JavaScript framework for writing natively rendered mobile apps for iOS and Android. The framework came from React, Meta's (formerly known as Facebook) JavaScript library. It is used to build user interfaces that leverage principles from functional programming and it also helps to handle stateful behavior more efficiently. Rather than focusing on the browser, React Native is a version of the framework built for mobile platforms, which is written as plain React and later compiled into native Android or iOS code.
With React Native, developers can take advantage of all the benefits of smart debugging tools and error-reporting features. For example, if a developer is comfortable using Chrome or Safari developer tools, React Native makes it possible to use them for mobile app development as well. Likewise, developers can use any text editor they prefer for JavaScript editing. Using React Native requires working with Xcode to develop for iOS and Android Studio for Android app development.
While React Native is a great cross-platform development tool, one of its downsides is that it doesn't automate the process of deploying apps to Android or iOS stores.
That being said, we've provided a step-by-step guide in this article to show developers the best way to get their Android and iOS apps ready to be published on either store.
Requirements for Launching Mobile Apps
A developer account for Apple and Google is the first and most important requirement to get started. To build a standalone iOS app and publish it to the stores, create an Apple Developer account.
Android follows a slightly different approach because a developer account is not required to build an Android app, but it is needed to submit the app to Google Play Store.
Also, it's important to prepare some essential pieces of information before beginning the launching process, such as:
-
Name of the App: Keep it short, unique, relevant, and catchy;
-
App Description: A brief description of what the app is about while paying attention to keywords;
-
Screenshots of the App: The screenshots will be used to promote major features of the app;
-
Bundle ID: Here's the standard Bundle ID format: com.CompanyName.AppName (eg. com.mtv.mtvmusic);
- The App Version;
- Developer/Publisher Profile information.
App Store Requirements
Some items needed to prepare for the App Store Launch includes:
-
The App Icon: It should be a 1024x1024 px image without transparency for iOS apps. For an Android app, the icon should be 512×512 px, and transparency is allowed;
-
Keywords: Must contain at most 100 characters where relevant keywords separated by commas can be utilized;
-
Location/Countries: Decide if the app will be available worldwide or in selected locations;
-
App Category: Select an App Store category and place the app in a subcategory based on its features;
-
Copyright Information: It contains the year and company name;
-
Demo Account: A test account created for the App store to review the application. Once the app is approved, the demo account can be removed.
Steps for Building Native Apps
A widely recommended tool for aiding the development of React Native apps is
Expo, an open-source platform that runs universal native apps on Android, iOS, and the web. This tutorial will show how to build and deploy Android/iOS apps using this tool.
These particular steps assume you’ve developed your app using expo (via npx create-expo-app) and that you’re using npx expo start to run and test it. So ensure you have expo-cli installed before you get started.
Disclaimer: Please also note that these instructions may be updated in the near future, as
expo build will be superseded by
eas build, another internal tool by Expo for project builds. To learn more about this, you can check out the official
expo build instructions.
How to Build an Android App using Expo
- First, run the following command:
- 'expo build:android'
- You will get a message asking to confirm your Android package name, which will have a default value provided as “com.<username>.<appname>” if you press enter.
Selecting apk will build an app that can be either installed directly on Android devices or later uploaded to the app store. app-bundle, on the other hand, will build an optimized bundle specifically for the app store.
Note: A developer can decide to upload a personalized Keystore or have Expo generate one for them. If the developer chooses to have Expo generate one, they have to ensure it is backed up because they'd have to submit updates in the future. Without the backups, updating the created app won't be possible.
- Here's how to backup the Keystore - run:
expo fetch:android:Keystore
- The Android app will begin the building process. To check the build's status, run:
expo build:status
- Once the app has been built, either an .apk or bundle URL of the Android app will be displayed on the terminal so it can be downloaded.
Building an iOS App with Expo
- Start by running the following command:
'expo build:ios'
Once you press enter to confirm the iOS bundle identifier (a default value is provided, typically as “com.<username>.<appname>”). Simulator is ideal for developing locally and testing. Archive will build an app to be deployed to the iOS store itself. Please note that the latter already requires the iOS credentials upfront, and upon selecting it you will be prompted for those;
Following the same pattern as Android's Keystore, either upload a personalized distribution certificate or allow Expo to do the uploading. The development of the iOS app would begin, and to check the build status, run:
expo build:status
- Once the app building process is complete, a ".ipa" URL of the iOS app will be displayed for download.
Once the .apk and .ipa files are ready, the developer can submit them to the Apple App Store or Google Play Store the same way they would with any native app.
How to Publish an Expo App on iOS and Android PlayStore
The first thing to do is publish the Expo app and to do that, ensure all app.json configurations are set up. Many properties can be added at this point, but only three are required: Name, Icon, and Version. Including the Bundle identifier and Build number for iOS apps is also important. For android apps, the package name, and version code should be added.
Adding a slug is also something the Expo team advises developers to add as it represents a part of the URL for the app. Another piece of information that can be added to app.json is the release channels but this only describes the necessary properties.
As soon as the app is ready and all configurations are set, follow the next steps to build the application through expo-cli.
-
To publish the project, open the terminal window and run: expo publish
- A link like this would show up: expo.io/@username/app-name. This is where you can derive two versions of the code for iOS and Android;
- Every time the app is updated, it would have to be published again, instantly implementing the changes for users to enjoy.
Final Note
Building and publishing React Native apps to their respective stores aren't so easy because it's important to have the right knowledge before getting started. Thankfully, following the steps in this article simplifies that process because it describes in detail how to publish an expo app using expo-cli.
*This is not the official Fetchly opinion but the opinion of the writer who is employed by Fetchly*