How to Publish React Native App on Play Store

After dedicating a significant amount of time to your app development, you’ve reached a final milestone—publishing it on the Google Play Store. Congratulations! However, a few more crucial steps are needed. In this guide, we’ll walk through the whole process. So, let’s get ready to embark on this journey together and dive into how to upload React Native app to Play Store!

Initiating Your First Build

Generating the Upload Key

Firstly, locate the Java JDK bin folder. For Windows users, it typically is at C:\Program Files\Java\jdkx.x.x_x\bin. Mac users can identify it by executing the /usr/libexec/java_home command in the terminal.

Now, navigate to this directory in your terminal using the cd command, followed by the path to your Java JDK bin folder.

Execute the following command based on your operating system:

For Windows users:

keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

For Mac users:

sudo keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

Upon running the command, you’ll be prompted to provide various details:

• Password: Your computer’s password.
• Enter keystore password: Create a password for the key.
• Re-enter new password: Repeat the chosen password.
• First and last name: Your name.
• Organizational unit: Optionally, your organizational unit (use ‘IT’ if not applicable).
• Organization name: Your organization’s name or ‘Freelancer’.
• City or locality name: Your city.
• State or Province name: Your State or Province.
• Two-letter country code: Country code of your residence.

Finally, verify the accuracy of the provided information by typing yes or no.

With this, your upload key is generated. But there’s one more step – integrating it into your project. Navigate to the Java SDK bin folder where you created the key, then drag and drop it into the android -> app directory of your project.

Next, update the gradle files with your new keystore information. In android -> app -> gradle.properties, add the following lines at the bottom:

MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore

MYAPP_UPLOAD_KEY_ALIAS=my-key-alias

MYAPP_UPLOAD_STORE_PASSWORD=*****

MYAPP_UPLOAD_KEY_PASSWORD=*****

Remember to replace ***** with the actual password you set for the keystore.

Finally, navigate to android -> app -> build.gradle and make the following updates:

android {
    ...
    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
        }
    }
}

Modifying the Application’s and Package Name

While this step isn’t obligatory, it’s a frequent practice. For this purpose, execute the following command:

npx react-native-rename “new_name_of_the_app” -b new_package_name_of_the_app

With this concise command, you’ll save time significantly.

Updating the Version

While this step isn’t obligatory too, it can significantly streamline your process, so it’s worth considering.

When rolling out updates, you’ll often need to increment both the version number and the build number of your mobile application. This holds true for both iOS and Android, potentially leading to a laborious and repetitive task.

Begin by accessing your package.json file and adjusting the version field.

Then, execute the following command:

npx react-native-version –never-amend

Changing Icons

Get ready for a crucial step—updating your app’s icons. This part is a must, so let’s get started with this essential task!

Every app requires icons, and in this case, we need various sizes to ensure compatibility.

First, head over to the App Icon Generator website. Upload the image you intend to use as your app’s icon, then tick the Android box before clicking the Generate button.

Unzip the archive and locate the android folder. Within, you’ll find the folders containing the necessary icon sizes.

Now, navigate to your project’s android -> app -> src -> main -> res directory. Here, drag and drop the folders from the downloaded zip file into your project. When prompted to replace existing folders, confirm the action by clicking Replace for each one.

However, we also need to incorporate rounded icons. To achieve this, open your project in Android Studio, then follow these steps:

1. In Android Studio, expand the android -> app folder.

2. Right-click the app folder, hover over New, and select Image Asset. Then choose the path to your icon image and adjust the image size if necessary. Proceed to the Background Layer.

3. Click on Color Asset Type and modify the background color.

4. Finally, click Finish to save the changes.

Creating an Application Bundle

1. Open your terminal and execute the following commands:

cd android

./gradlew bundleRelease

2. Once the bundling process ends, locate your Android app bundle at the following path: android -> app -> build -> outputs -> bundle -> release -> app-release.aab.

The technical aspect of our tutorial is complete! Now, let’s switch back to the Google Play Console to upload the app to Play Store.

Creating Your Application on the Google Play Console

From the main dashboard screen, click on the Create app button.

Next, provide basic information about your application: app name, default language, whether your app is an app or a game, and choose the pricing model for your application.

Configuring Your Application

With the preliminary steps completed, add more details about your application:

• App Access: Determine if your application requires login credentials or authentication. Provide necessary instructions if applicable. If not, choose All functionality is available without special access.
• Ads: Specify whether your application contains ads. Ensure the ads adhere to Google ads policy. Keep in mind that selecting Yes will indicate to users that your app includes ads.
• Content Ratings: Complete a brief questionnaire about your application to receive official content ratings. These ratings will be visible on the Google Play Store to help users determine suitability.
• Target Audience: Choose the appropriate age group for your application’s target audience. On the following page, address whether your app unintentionally appeals to children.
• News App: Indicate if your application functions as a news app.
• Data Safety: Add a link to a privacy policy and show how your application collects and shares data.
• App Category and Contact Details: In this section, add additional details: indicate if your application is an app or a game, choose the app category, and provide an email address, phone number, website URL, and external marketing.
• Set Up Your Store Listing: Here, you’ll need to provide the app name, short and full description, app icon (512×512 pixels), feature graphic (1024×500 pixels), and phone and tablet screenshots.

Submitting an App for Google Review

After preparing your application, it’s time to submit it for Google Review:

• Navigate to Release your app, click the View Tasks dropdown, and select the first task.
• Choose the countries and regions where you want your app to be available.

• Create a New Release: Provide app bundles, the release name, and release notes.

• If everything is correct, click Start Rollout to Production and confirm the rollout.

You have now submitted your app for Google Review. Google will review your app, which usually takes around 24 hours. If your app meets guidelines, its status will change from “In Review” to “Available on Google Play.”

Main Errors and Issues When Publishing React Native App on Play Store

Publishing a React Native app on the Play Store can be challenging. Some possible errors and issues can arise during the process, such as:

Signing issues: You need to generate a valid upload key and sign your app with it before uploading it to the Play Store. You also need to set up Gradle variables to store your key information securely. If you lose your upload key or it gets compromised, you need to contact Google support to reset it.

Permission issues: You need to declare the permissions that your app needs in the AndroidManifest.xml file, and make sure they are aligned with the core functionality of your app. Google Play has recently restricted the use of some sensitive permissions, such as READ_SMS, and will reject your app if you use them without a valid reason.

Launch issues: You need to test your app thoroughly before publishing it, especially the release build, which may behave differently from the debug build. Sometimes, your app may crash on launch due to various reasons, such as missing dependencies, incorrect configurations, or incompatible libraries.

Bundle issues: Bundling your app is a new format that allows Google Play to generate and serve optimized APKs for each device configuration, resulting in smaller download sizes and better performance. However, bundling your app may also cause some errors related to compatibility or verification, such as unsupported architectures or invalid signatures. To avoid these errors, you need to use the latest version of React Native and Android Studio and build your app bundle using the ./gradlew bundleRelease command.

Final Words

In this article, we have learned how to publish React Native app to Google Play. We have covered the steps to generate a signed APK, create a Google Play Console account, upload the app bundle, and release the app to the public. Publishing an app on the Play Store is a rewarding experience that allows you to share your work with millions of users around the world. We hope this guide has helped you to achieve your goal.

Save your time! Request Google Play upload by AppsGeyser professional – Publish your App