The blog is a short tutorial helping you understand and learn how to publish a React Native app on the stores.
Publishing React Native App to Google Play Store
Android apps need apps to be signed digitally to get installed. When you wish to deploy your app on the Google Play Store, you must sign in with a security key. Way before in 2017, Google Play managed to sign automatically. However, before you upload your app to the Google Play Store, you must sign it with an upload key. The guide below will take you through the process and enlist the steps needed to package the JavaScript bundle.
Generate Upload Key
For Windows:
Keytool must be run on Windows from C:\Program Files\Java\jdkx.x.x_x\bin, as administrator.
keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
The command gives a prompt for passwords for the Keystore and key and the Distinguished Name fields for your key. Further, it generates the keystore as a file called my-upload-key.keystore.
The single key in the keystore is valid for 10,000 days.
For macOS
If you do not know where your JDK bin folder is, you can perform the below command:
/usr/libexec/java_home
You will get the directory of the JDK and it will look as below:
/Library/Java/JavaVirtualMachines/jdkX.X.X_XXX.jdk/Contents/Home
Use the command cd/your/jdk/path to navigate that directory and then you can access the below keytool command with sudo permission:
sudo keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
Set up Gradle Variables
1. Put the my-upload-key.keystore file below the android/app directory in your project folder.
2. Edit the file ~/.gradle/gradle.properties or android/gradle.properties, and then include the following (replace ***** with the correct keystore password, alias, and key password),
MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=*****
MYAPP_UPLOAD_KEY_PASSWORD=*****
They are global gradle variables that can be used later in the Gradle config to sign your app.
Add Signing Config to your App’s Gradle config
The last step to configuration is to set up release builds that need to be signed by using the upload key. You need to edit the file android/app/build.gradle in your project folder and then include the below signing config:
...
android {
...
defaultConfig { ... }
signingConfigs {
release {
if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
storeFile file(MYAPP_UPLOAD_STORE_FILE)
storePassword MYAPP_UPLOAD_STORE_PASSWORD
keyAlias MYAPP_UPLOAD_KEY_ALIAS
keyPassword MYAPP_UPLOAD_KEY_PASSWORD
}
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
...
Generate the AAB Release
First of all, run the below command in the terminal:
npx react-native build-android --mode=release
The above command will utilize Gradle bundleReleases which typically bundles all the JavaScript that is needed to run your app in the Android App Bundle (AAP). If you want to modify the pattern of the JavaScript bundle or any of the drawable resources bundled, you can refer to android/app/build.gradle to check how to update and make the changes.
Further, you can find the generated AAB folder under:
android/app/build/outputs/bundle/release/app-release.aab,
which is ready to be uploaded to Google Play
In addition, the App Signing by Google Play should be configured for your application on Google Play console, if you want Google Play to accept your AAb format. For updating the existing app that has no access to App Signing, you can check with the migration section and find out the ways of performing configuration.
Testing your app build release
Before uploading the release build to the Play Store, you must test it thoroughly. Initially, you must uninstall previous versions of the app that are already installed. Install it on the device by using the below command on the project root:
npm run android -- --mode="release"
Also, understand that –the mode release is accessible if you possess the set signing. In that way, you can terminate all running bundler instances as all your framework and JavaScript code gets bundled in the APK’s assets.
Proguard Set up to reduce the APK size (Optional)
This tool called Proguard can help you slightly reduce the APK size. It strips the parts of the React Native Java bytecode that your app is not using at all. For enabling and setting up Proguard, you must edit
android/app/build.gradle:
/**
* Run Proguard to shrink the Java bytecode in release builds.
*/
def enableProguardInReleaseBuilds = true
Publishing React Native App on the Apple App Store
The process of publishing the React Native app is similar to that of any other native iOS app. All you need is to consider some additional aspects.
Enabling App Transport Security
Released in iOS 9, the App Transport Security is a feature that will reject all HTTP requests that remain unsent over HTTPS. Hence, more of HTTP traffic will get blocked along with the React Native server. ATS disables localhost by default in React Native projects so that the development can become easier.
Also, make sure you enable ATS before building the app for production. You need to remove the localhost entry from the NSExceptionDomains dictionary and set NSAllowsArbitraryLoads to false in your Info.plist file in the ios/ folder. Also, you can re-enable ATS from within Xcode after unlocking your target properties under the Info pane and then editing the App Transport Security Settings entry.
Configuring Release Scheme
To build an app for distribution in the App Store, you need to use Release scheme in Xcode. All apps built for Release will then disable the in-app Dev Menu automatically and will prevent the users from inadvertently accessing the menu in production. Also, it will bundle the JavaScript locally for putting the app on the device and then testing it as it is not connected to the computer.
For app configuration, you must use Release scheme and go to the Product – Scheme- Edit Scheme. Further, you must select the Run tab in the sidebar and set the Build Configuration dropdown to Release.
Some Pro Tips:
Over some time, you will find your app bundle growing in size. Also, you may see a blank screen flash in between your root application display and splash screen. In such a scenario, you can use the following code to AppDelegate.m and keep your splash screen continuously displayed during the transition.
// Place this code after "[self.window makeKeyAndVisible]" and before "return YES;"
UIStoryboard *sb = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil];
UIViewController *vc = [sb instantiateInitialViewController];
rootView.loadingView = vc.view;
Whenever you target a physical device, you will see a static bundle getting built even in Debug. To save time, all you need to do is turn off the bundle generation in Debug by adding the below shell script in the Xcode Build Phase Bundle React Native code and images:
if [ "${CONFIGURATION}" == "Debug" ]; then
export SKIP_BUNDLING=true
fi
Building app for Release
Further, now you can build your app and release it by tapping Cmd ⌘ + B or by choosing Product – Build from the menu bar. After you build the app for release, you can distribute the app to the beta testers and then submit it to the App Store.
Once the testing is done and the app gets ready to publish to the App Store, consider the below guide:
- Terminal launch and navigation into the iOS folder of your app and type open ..
- Double-click on YOUR_APP_NAME.xcworkspace. It should launch XCode.
- Click on Product → Archive. Ensure to set the device to “Any iOS Device (arm64)”.
- Once the archive is completed, in the archive window, click on Distribute App.
- Click on App Store Connect now (if you want to publish in App Store).
- Click Upload → Ensure all the checkboxes are selected, and hit Next.
- Choose between Automatically manage signing and Manually manage signing according to your requirements.
- Click on Upload.
- Now you can find it in the App Store Connect under TestFlight.
Lastly, fill up the required information and in the Build Section, choose the app build and then click on Save – Submit for Review.
Conclusion
You can effortlessly publish your app build from both your Google Play Account and Apple App Store account. For both as a fresh app, all you need is to fill in the needed information along with the app name, description, language, category, etc, and then take screenshots and videos. For Google, you need to complete the rating survey and while uploading the AAB, Google will always ask to create a release key. Consider it as your best bet because Google will manage the key and you will be free from worries in the future.
To know more about React Native and the top advantages of React Native, stay tuned to our regular blogs as we will continue to share our knowledge and insights about the current technology trends in the app development world. At Whitelotus Corporation, we nurture and shape up your innovative React native app ideas for startups.
Hire React Developers in India and collaborate with us to create futuristic React Native apps that will help your business grow, improving productivity and work efficiency.
react native app now!
