How to Generate Signed APK in React Native

Syamlal CM

6 years ago

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 named my-release-key.keystore valid 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 your MYAPP_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 at android/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.