Ultimate Guide to bundle React native apps and upload to playstore

Bundle or Build react native apps and upload to Google PlayStore

When ever we do have a project, we are always excited to start the project, motivate yourself to continue and finish it up. But one thing can make you sad especially if you're a new to doing it, that is to bundle you react native app and upload it to Play store. Here is a step by step guide to do that.

Before you proceed, make sure you read how to add splash screen for you react native application.

Generating an upload key and Assigning an Alias Name

We first have to generate a special upload key with an alias name, Here is a command for you to run and do that below

keytool -genkeypair -v -keystore     MY-UPLOAD-KEY-FILE-NAME.keystore -alias     MY-UPLOAD-KEY-ALIAS-NAME -keyalg RSA -keysize 2048 -validity 10000    

 This command prompts you for passwords for the keystore and key and for the Distinguished Name fields for your key. It then generates the keystore as a file called MY-APP-KEY.keystore.

The keystore contains a single key, valid for 10000 days. The alias is a name that you will use later when signing your app, so remember to take note of the alias.

For Mack Book, Navigate to your JDK directory by using the command $cd /your/jdk/path and use the keytool command with sudo permission as shown below.

sudo keytool -genkey -v -keystore     MY-UPLOAD-KEY-FILENAME.keystore -alias     MY-UPLOAD-KEY-ALIAS-NAME -keyalg RSA -keysize 2048 -validity 10000

Once you have these keys, you should store this key in secured environment or application, and do not loose them.

In a situation that you also wish to recover any key, here are the instructions to follow and do that.

Setting up Gradle variables (OPTIONAL)

To make use of our keystore file when the bundle is in progress, we need to setup the keyfile and variable in our gradle-wrapper-properties file. These are se of global variable which we will use inside android\app\build.gradle for signingconfig release settings.

  • Place the MY-UPLOAD-KEY-FILE.keystore file under the android/app directory in your project folder.
  • Edit the file ~/.gradle/gradle.properties or android/gradle.properties, and add the following (replace ***** with the correct keystore password, alias and key password)


distributionBase=GRADLE_USER_HOME    
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-6.6.1-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

MYAPP_UPLOAD_STORE_FILE= MY-UPLOAD-KEY-FILE.keystore
MYAPP_UPLOAD_KEY_ALIAS= MY-UPLOAD-KEY-ALIAS
MYAPP_UPLOAD_STORE_PASSWORD=****
MYAPP_UPLOAD_KEY_PASSWORD****


Adding signing config to your app's Gradle config

Now let's setup release builds to be signed using upload key. Edit the file android/app/build.gradle in your project folder, and add the signing config.

signingConfigs {    
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
        release {
            storeFile file("**.keystore")
            storePassword "***"
            keyAlias ""
            keyPassword "**"
        }
    }

Generating the release APK

After the above steps then go over to android folder and run this build command to build the app finally.

cd android    
./gradlew bundleRelease

Testing the release build

To test the release build just run the below command

npx react-native run-android --variant=release