How to configure your native react app for the store

• Settings to do in your application to publish it on the play store

To publish an app in play store you need to generate an aab or an apk file, play store recommends generating an aab for publication. In this article I will teach you how to generate both types of files.

The first step is to access your project folder:

cd nameOfProject

Since we will be generating the file for the play store, it will only be the android part.

Go to the android folder and then go to the app folder:

cd android/app

Now we need to create a certificate in order to be able to generate the apk and the aab:

• The keytool is the tool used to generate and is found in jdk

Windows

• With this command we generate the certificate in Windows

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

MacOS

• With this command we generate the certificate in MacOS

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

The next step is to create a password of at least 6 characters, this password will be used for you to access the key.

After creating and entering your password, you will be asked a few questions and at the end of the questions you have to confirm the creation of the key:

if you check the key is inside the path:

• nameProject/android/app

Setting up Gradle variables

We need to add the variables below to the end of the file android/gradle.properties

now you replace the asterisks with your password

MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=*****
MYAPP_UPLOAD_KEY_PASSWORD=*****

Adding signing config to your app's Gradle config

• edit the file android/app/build.gradle
• Now you will find a piece of code where signingConfigs {} is present and paste the following

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
  }
}

• In the block below inside buildtypes and inside release, you will add the following

signingConfig signingConfigs.release

Scripts to Generating the AAB and APK

APK

cd android && ./gradlew assembleRelease

AAB

cd android && ./gradlew bundleRelease

To make your life easier, I recommend that you create a script in package.json.

Example below:

"scripts": {
    "android:bundle": "cd android && ./gradlew bundleRelease",
    "android:apk": "cd android && ./gradlew assembleRelease"
  }

Where are these files generated?

• APK is in the path:

nameOfProject/android/app/build/outputs/apk

• AAB is in the path:

nameOfProject/android/app/build/outputs/bundle

References

• https://reactnative.dev/docs/signed-apk-android#generating-the-release-aab

Follow me on LinkedIn and github

• LinkedIn: https://www.linkedin.com/in/luizgabrielrebelatto/
• Github: https://github.com/Luizrebelatto