← back to Blog

SERIES: Preparing Your React Native App for Production(Android) - Part 1

Written by: Victor Bruce

16th May 2021

|

5 min read

space rockets deploying

If you have ever wondered how to build the production or release version of your React Native app, then you have come to the right place. Before proceeding, this tutorial is targeted only at the android version of our React Native app.


Table Of Content 📖

  1. Create a React Native App from Scratch
  2. Develop version 0.0.1 of our app
  3. Build a production-ready version of our app for android

TLDR;

You would not be here if you do not have an app already. You can feel free and jump to topic three(3) of the table content. Due to educational purposes, I will start from scratch. And also, this is a long series I am creating hence the detailing.


Step 1: Creating A React Native App

Under this section, I am going to skip setting up a React Native environment. Check out a detailed guide on how to set up your development environment for React Native.

Pre-requisite:

  • Node, npm, and npx
  • Android Studio, Android Emulator, or A physical Android device
  • A text editor (recommend: vscode)

Steps:

  1. In your terminal, run the command:
npx react-native init rnProduction

After successful completion, you should see a welcome react native screen

  1. Open the project inside your preferred text editor or IDE(Integrated Development Environment)

  2. Start the development environment by running the command below:

npx react-native start
  1. Run the app on an android emulator or physical android device by running the command below:
npx react-native run-android

Below is a result of what you should expect after running the application for the first time.

welcome react-native screen


Recap:

Under step one, we created a react-native app from scratch and ran our application locally.

Step 2: Develop version 0.0.1 of our app 🛠

Under this section, we’re going to pretend to be building the first MVP(Minimum Viable Product) version of our application. I am going to do this by rendering the version of the application inside the App.js file.

Nothing too much, just something simple. 😊

  1. Render the version number of the app by importing the package.json file.
import packageJson from "./package.json";
  1. Style the app.
import React from "react";
import { View, Text, StyleSheet } from "react-native";
import packageJson from "./package.json";
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.title}>Production App</Text>
<Text style={styles.versionNumber}>{packageJson.version}</Text>
</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
title: {
fontSize: 24,
fontWeight: "bold",
marginBottom: 8,
},
versionNumber: {
fontSize: 18,
},
});
  1. Done
mvp app


Step 3: Build a production-ready version of our app for android 🛠🚀

This is the crucial step we have all been waiting for right?😊 Building a production-ready version requires some steps. Under this section, we will look at :

  1. Some key terms you will come across and their meaning
  2. Generating a release key
  3. Setting up Gradle variables
  4. Adding signing config to your app’s Gradle config
  5. Generating the release APK
  6. Testing the release build of your application

1. Some Key Terms You Will Come Across and Their Meaning:

Android Keystore System:

An Android Keystore System lets you store cryptographic keys in a container called a Keystore to make them more difficult to extract from the device.


Android Keystore:

An android Keystore is a container for authorization certificates or public key certificates and is often used by Java-based applications for encryption, authentication, and serving over HTTPS.


Debug Keystore:

A Debug Keystore is a randomly generated certificate(Keystore) that is used to sign an APK(Android Package). The Debug Keystore is generated by our build tools(Android SDK) the first time we run our app on an emulator or physical device in development or debug mode.

What can you use a debug key for?

  • A debug Keystore is used to sign an APK so we can run our app on an emulator or physical android device connected to our development machine via a USB.

What you cannot use a debug key for?

  • You cannot use a debug key to distribute your app to the play store or other platforms.

NB: By default, the debug configuration uses a debug keystore with a known password and a default key with a known password. Also, the debug keystore can be located at $HOME/.android/debug.keystore and is created if not present.

$ keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000


APK (Android Package):

Android Package is the package file format used by the Android operating system, and several other Android-based operating systems for the distribution and installation of mobile apps, mobile games, and middleware. (Wikipedia)


Signed Apk:

A signed apk is an android package file that has been digitally signed with a certificate for which the developer holds the private key. You can sign an application using a debug key or a release key. A device will not install an APK or bundle file that is not signed.


Gradle:

Gradle is a build system, which is responsible for code compilation, testing, deployment, etc.


2. Generating a release key

We will use a tool called a key tool to generate our release-key.keystore file. Note, if you don’t have a key tool on your system, kindly get that to work before proceeding.

Before generating the release Keystore, let’s have a look at how our android folder within our project looks like:

Before the release-key.keystore file is generated

You can see that we only have the debug.keystore file. As I said earlier, this helps us to sign our apk so that we can develop and test our app when in debug mode.

a. Run the command:

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

Breaking down the command:

  • Keystore name: “release-key.keystore
  • Key alias: “rnProduction-key

b. Enter a key and Keystore password when prompted:

enter key password

💡*Pro Tip: never forget your keystore file name, key alias, keystore, and key password as it will be needed to set up your Gradle variables.*


c. Fill in the rest of the details such as first name, last name, etc when prompted

fill details


The release-key.keystore file will be placed inside the root of your project folder after generating. Drag and drop the file into the android/appfolder. Below is the result of how the android folder looks after generating the release-key.keystore file:


release key showing inside the app folder


3. Setting Up Gradle Variables:

As mentioned earlier, Gradle is a build system that is responsible for code compilation, testing, deployment, etc. During the process of building our production application, Gradle will require some information to complete the build. These are the task, type, properties, etc.

For the properties key, we will have to supply Gradle with the following key-pair values:

MYAPP_UPLOAD_STORE_FILE = release-key.keystore;
MYAPP_UPLOAD_KEY_ALIAS = rnProduction-key;
MYAPP_UPLOAD_STORE_PASSWORD = your-password;
MYAPP_UPLOAD_KEY_PASSWORD = your-password;

a. ✏️ Edit the file ~/.gradle/gradle.properties or android/gradle.properties, and add the values in the image above.

In our case, I will open the ~/.gradle/gradle.properties file and pass the values there. This approach is safer because your key and Keystore password are not exposed when you commit your project to a version control site like Github.

❗️Note: If you don't see the gradle.properties file inside of the ~/.gradle folder, just create one.

MYAPP_UPLOAD_STORE_FILE = release-key.keystore;
MYAPP_UPLOAD_KEY_ALIAS = rnProduction-key;
MYAPP_UPLOAD_STORE_PASSWORD = your-password;
MYAPP_UPLOAD_KEY_PASSWORD = your-password;

4. Adding signing config to your app’s Gradle config

Up until now, the only signingConfig we have is the debug which is automatically generated by our build tool when in debug mode. Below is how our android/app/build.gradle looks like :

android app build.gradle file


Now, we are going to make changes to the signingConfigs and buildTypes by adding a release build and pointing our build type to the release build.

add the release build to signingConfigs
point the buildTypes to sginingConfgis.release


👇Below is the final result of the steps above:

after adding a signingConfig to build.gradle


5. Generating a release APK

a. Change directory into the android folder: cd android

b. Run the command ./gradlew assembleRelease to bundle your application into an apk file


6. Testing the release build of your App

You can test out the production build of your application thoroughly by running the command npx react-native run-android --variant=release`. But before that, you will have to uninstall the debug version of the app from the emulator or physical device you are running on.

❗️Note: the --variant=release is only available if you’ve set up signing as described above.`


Recap:

In this blog tutorial, we looked at how:

👉 Create a react-native app from scratch

👉Built a “fake” MVP version of the app

👉Prepare the app for production by generating a release key and signing our app

See you in the next post as we look at how to publish the production-ready app to Firebase App Distribution for users to test our application.


Thank you!🙏


Part 2: https://victorbruce82.medium.com/series-publish-your-production-ready-react-native-application-to-firebase-app-14651017d443

References: