Geek Culture
Published in

Geek Culture

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

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 📖

  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:

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:

  1. Render the version number of the app by importing the package.json file.
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
  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

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

--

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

Set up Android virtual device in Android studio

Seven Rules for a Successful App Store / Play Store Listing

Android ViewBinding using in Activity, Fragment, Dialog, View, RecyclerViewHolder

Robolectric Tips: Testing RecyclerViews

Flutter Firebase Realtime Database- Flutter Tutorial

DoragonLand: Re-schedule Open Beta Game

Androidx Biometric library code review

MVVM Android development (java)

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
Victor Bruce-Crabbe

Victor Bruce-Crabbe

A Frontend and Mobile Developer. I share my learning experience through writing based on what I will want to read when learning a new concept to help others.

More from Medium

Fastlane with React Native — Part-1

SINGLE APP FOR WEB, IOS, AND ANDROID USING REACT-NATIVE ( NEW APPROACH ) — PART 1

How to use Redux Hooks in a React Native App (Login, Logout Example)

10 Reasons: Why to consider React Native while building an application from scratch [Detailed…