How to Generate Signed apk in React Native

After we develope an Android app in React Native, we have to generate an APK file to install it on any Android devices or upload to PlayStore.

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

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

Prerequisites

Before following this article, the reader must have a basic knowledge about coding a simple React Native app.

Otherwise please refer to the official React Native documentation or React Native installation and setup guide by Techomoro.

Generate signed APK

1. Generate a signing key

On terminal of your project directory,

On Terminal,

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: [email protected]
Re-enter new password: [email protected]
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 key password for <my-key-alias>Note: If you need to have a new key password, then enter it.

It generates a key-store file on your project directory named my-release-key.keystore valid for 10000 days.

2. Cut/Paste the generated key file to the correct directory

You have to move newly generated  “my-release-key.keystore” file to android/app directory. For this,

On Terminal,

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

3. Edit gradle.properties

Now open “gradle.properties” file under the android directory on your project. You can see a code as below at the bottom of 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 looks like below.

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore 
MYAPP_RELEASE_KEY_ALIAS=my-key-alias 
[email protected]
[email protected]

4. Edit build.gradle

Now you have to add signing config to your app’s gradle config. For this, open “build.gradle” file under your android/app directory.

Add

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

and

 signingConfig signingConfigs.release

to your build.gradle file at the position listed as bold 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'}

5. Generate the release key

Simply run the following commands on your terminal.

On Terminal,

cd android

On Terminal,

./gradlew assembleRelease

The generated APK can be found at android/app/build/outputs/apk/app-release.apk and is ready to be distributed. You can test the signed apk on your android device connected with your system, by simply running the code below.

On Terminal,

react-native run-android --variant=release

or you can manually copy the apk file to your android device and install.

6. 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 to support in both platforms. But the size of this type of apk file will be slightly larger. So we have to split the ap file for both x86 and ARMv7a CPU architectures. Google play store console supports in 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, edit android/app/build.gradle

1. Comment out or remove the lines

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

2. Find the lines below and change its values to true.

def enableSeparateBuildPerCPUArchitecture = true

universalApk true

7. 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, you have to edit  “android/app/build.gradle” like 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 any other Android app stores.