How To Create Apk File In React Native

After developing an Android app in React Native, we have to generate an APK file to install it on an Android device or upload it to PlayStore. Here we will explain the steps to generate a signed APK in React Native.

Prerequisites

The reader should have an understanding of React Native framework before continuing this article.

What we will learn

In this article, we will learn the following things:-

what is a signed APK
Generating a signed APK in React Native

What is a signed APK

Android requires that all apps be digitally signed with a certificate. We have to generate a signed APK to install it on our Android device and distribute it via the play store.

So here in this article, we will discuss the steps to generate a signed APK in React Native.

Generate signed APK in React Native

We are going to generate the signed APK in a React Native. I assume that you already created a React Native application. Otherwise, create a new React Native app.

Generate a signing key

We need a signing key to generate a signed APK. So let us set up a my-release-key.keystore file with all credentials.

Open the Terminal and execute the below command.

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

This command prompts you for passwords for the Keystore and key, and to provide the Distinguished Name fields for your key. You have to enter it manually.

Enter your keystore password:          password@123          Re-enter new password:          password@123          What is your first and last name? [unknown]:          Syamlal CM          What is the name of your organizational unit? [unknown]:          Techomoro Blog          What is the name of your organization? [unknown]:          Techomoro          What is the name of your city or Locality? [unknown]:          Calicut          What is the name of your State or Province? [unknown]:          Kerala          What is the two-letter country code for this unit? [unknown]:          IN

Press Enter when it is prompted to Enter the key password for <my-key-alias>. If you need a new key password, then enter it.

It will generate a key-store file on your project directory namedmy-release-key.keystorevalid for 10000 days.

Move the generated key file to the correct directory

We have to move the newly generated "my-release-key.keystore" file to the android/app directory. To do this, execute the below command on the Terminal.

mv my-release-key.keystore /android/app

Edit gradle.properties

Now open"gradle.properties" file under the android directory on your project. We can see the below values in the file.

          MYAPP_RELEASE_STORE_FILE=my-release-key.keystore MYAPP_RELEASE_KEY_ALIAS=my-key-alias MYAPP_RELEASE_STORE_PASSWORD=***** MYAPP_RELEASE_KEY_PASSWORD=*****

Just replace the stars with yourMYAPP_RELEASE_STORE_PASSWORD and MYAPP_RELEASE_KEY_PASSWORD. And it will look the same as below.

          MYAPP_RELEASE_STORE_FILE=my-release-key.keystore  MYAPP_RELEASE_KEY_ALIAS=my-key-alias  MYAPP_RELEASE_STORE_PASSWORD=password@123 MYAPP_RELEASE_KEY_PASSWORD=password@123

Edit build.gradle

Now we need to add the signing config to your app's Gradle config. Open the "build.gradle"file under your android/app directory and add the code inside it.

          signingConfigs { release { if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {  storeFile file(MYAPP_RELEASE_STORE_FILE)  storePassword MYAPP_RELEASE_STORE_PASSWORD  keyAlias MYAPP_RELEASE_KEY_ALIAS  keyPassword MYAPP_RELEASE_KEY_PASSWORD } } }

We also need to add the below code.

          signingConfig signingConfigs.release

You might be confused about where to add these lines. After adding these codes, the complete file build.gradle will look the same as below.

          project.ext.react = [ entryFile: "index.js"] apply from: "../../node_modules/react-native/react.gradle" def enableSeparateBuildPerCPUArchitecture = true def enableProguardInReleaseBuilds = true android { compileSdkVersion 23 buildToolsVersion "23.0.1" defaultConfig { applicationId "com.awesomeapp" minSdkVersion 16 targetSdkVersion 22 versionCode 1 versionName "1.0" ndk { abiFilters "armeabi-v7a", "x86"}}            signingConfigs {            release {            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {            storeFile file(MYAPP_RELEASE_STORE_FILE)            storePassword MYAPP_RELEASE_STORE_PASSWORD            keyAlias MYAPP_RELEASE_KEY_ALIAS            keyPassword MYAPP_RELEASE_KEY_PASSWORD}}}            splits { abi { reset() enable enableSeparateBuildPerCPUArchitecture universalApk false // If true, also generate a universal APK include "armeabi-v7a", "x86"}} buildTypes { release { minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"            signingConfig signingConfigs.release            }} applicationVariants.all { variant -> variant.outputs.each { output -> def versionCodes = ["armeabi-v7a":1, "x86":2] def abi = output.getFilter(OutputFile.ABI) if (abi !=null) { // null for the universal-debug, universal-release variants output.versionCodeOverride = versionCodes.get(abi) * 1048576 + defaultConfig.versionCode}}}} dependencies { compile project(':react-native-vector-icons') compile project(':react-native-linear-gradient') compile fileTree(dir: "libs", include: ["*.jar"]) compile "com.android.support:appcompat-v7:23.0.1" compile "com.facebook.react:react-native:+" // From node_modules} task copyDownloadableDepsToLibs(type: Copy) { from configurations.compile into 'libs'}

Generate the release key

Now generate a release key with the commands below.

cd android ./gradlew assembleRelease

This will generate the APK of our React Native app.

The generated APK can be found atandroid/app/build/outputs/apk/app-release.apk and is ready to be distributed.

We can test the signed APK on your android device connected with your system, by simply running the code below.

react-native run-android --variant=release

Note: We can manually copy this APK to our Android device and install it.

Split APK by ABI to reduce the file size

By default, the generated APK has native code for supporting in x86 and ARMv7a CPU architectures.

This makes the generated APK support in both platforms. But the size of this type of APK file will be slightly larger.

We have to split the ap file for both x86 and ARMv7a CPU architectures. Google play store console supports uploading multiple APKs for the same app.

So we don't have to worry about the distribution of specific APK to specific devices. Play store will take care of it.

To split the APKs, open the file android/app/build.gradle and comment out or remove the lines below.

// ndk { //  abiFilters "armeabi-v7a", "x86" // }

Now find the lines below and change their values to true.

def enableSeparateBuildPerCPUArchitecture = true universalApk true

Progaurd to reduce the file size of APK

Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using.

To enable this, we need to edit "android/app/build.gradle" as below.

def enableProguardInReleaseBuilds = true

Summary

So, we have learned the steps to generate a signed APK in React Native. The generated APK can be uploaded to PlayStore or any other Android app store.