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

Victor Bruce-Crabbe
May 16 · 8 min read
Photo by Bill Jelen on Unsplash

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 📖

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:

Steps:

After successful completion, you should see something similar below:

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

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

starting a local server

4. Run the app on an android emulator or physical android device by running the command below:

run app on an emulator or physical device

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

Welcome screen on the first run

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. 😊

Steps:

import package.json file

2. Style the app.

3. Done.

Our 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:

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?

What you cannot use a debug key for?

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

Release Keystore:

A release Keystore is a custom generated certificate that is used when you want to run in the release or production mode or build the release version of your application so you can distribute directly to users or publish on an application market such as Google Play, Firebase App Distribution, etc.

Difference Between Release Keystore and Debug Keystore

There are two modes, the debug mode and release mode. The debug keystore is used when we are developing and testing our application whilst the release keystore is used when we want to distribute or publish our app to an application market like Google Play.

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

generate release key

Breaking down the command:
-
Keystore name: “release-key.keystore
- Key alias: “rnProduction-key

b) Enter a key and Keystore password when prompted:

💡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 in the details when prompted

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:

Here, you can see the release-key.keystore file inside the android/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:

Gradle properties

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.

~/.gradle/Gradle.properties file

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:

https://www.geeksforgeeks.org/android-build-gradle/#:~:text=Gradle%20is%20a%20build%20system,the%20actual%20build%20process%20happens.

https://developer.android.com/studio/publish/app-signing

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store