A Tale of Reducing Expo/React Native Android Application

awalariansyah

Awal Ariansyah

Posted on April 13, 2021

A Tale of Reducing Expo/React Native Android Application

I'm going to take you to my journey on how to smoothly reduce an android application made with React Native/Expo and hopefully without getting any error. Let's begin the journey!

First things first, let's talk about my development environment. I'm using Lubuntu 20.04 focal, with Desktop Environment LxQt 0.14.1 and the details as shown in the picture below. I've successfully reduce my app for about 49% (the universal version).

Alt Text

Requirements

There are several package you need to install in order to have smooth build.

Install JRE, JDK and check the installation

sudo apt-get install default-jre
sudo apt-get install defalut-jdk

java -version
javac -version
Enter fullscreen mode Exit fullscreen mode

Alt Text

Install Expo Command Line

sudo npm install --global expo-cli
Enter fullscreen mode Exit fullscreen mode

Install Android Command Line Tools

sudo export ANDROID_HOME=/usr/lib/android-sdk
sudo wget https://dl.google.com/android/repository/commandlinetools-linux-6609375_latest.zip
sudo unzip commandlinetools-linux-6609375_latest.zip -d cmdline-tools
sudo mv cmdline-tools $ANDROID_HOME/
sudo export PATH=$ANDROID_HOME/cmdline-tools/tools/bin:$PATH
Enter fullscreen mode Exit fullscreen mode

Set up licenses

Go to /usr/lib/android-sdk/ directory

cd /usr/lib/android-sdk/
Enter fullscreen mode Exit fullscreen mode

We need to accept the license before using the sdk

sudo yes | sdkmanager --licenses
Enter fullscreen mode Exit fullscreen mode

And also we need to change the permission on /tmp folder

sudo chmod -R 0777 /tmp
Enter fullscreen mode Exit fullscreen mode

Action

So, the first action you need to take is open up your expo react native folder in a terminal. Make sure you back up your project files first, for safety.

Run the following command

expo eject
Enter fullscreen mode Exit fullscreen mode

You will be asked with several question, and just answer it based on your project information. After you finish, there will be a new folder inside your project called android and IOs.

Go to android folder and make a new file called local.properties. This file will be used for pointing the sdk that gradle need in order to build your application.

cd android
touch local.properties
sudo nano local.properties
Enter fullscreen mode Exit fullscreen mode

add the sdk.dir variable like this

sdk.dir = /usr/lib/android-sdk/
Enter fullscreen mode Exit fullscreen mode

Alt Text

Ctrl + O, Enter, Ctrl + x to save it.

Next, go to the android/app folder on your terminal and generate a keystore for your application so that you can publish it in Google Play Store.

cd android/app
sudo keytool -genkey -v -keystore yourkeyname.keystore -alias yourkeyaliasname -keyalg RSA -keysize 2048 -validity 10000
Enter fullscreen mode Exit fullscreen mode

Replace yourkeyname and yourkeyaliasname. And you will be asked for password. Make sure you remember the password.

After finish, a new file will appear with the extension (.keystore). That's your key. Now head back one directory and edit the gradle.properties file.

cd ..
sudo nano gradle.properties
Enter fullscreen mode Exit fullscreen mode

add this line below

MYAPP_UPLOAD_STORE_FILE=yourkeyname.keystore
MYAPP_UPLOAD_KEY_ALIAS=yourkeyaliasname
MYAPP_UPLOAD_STORE_PASSWORD=yourkeypassword
MYAPP_UPLOAD_KEY_PASSWORD=yourkeypassword
org.gradle.jvmargs=-Xmx4096m
Enter fullscreen mode Exit fullscreen mode

Alt Text

Replace yourkeyname, yourkeyaliasname and yourkeypassword then save it.

Now, go to app folder and edit the build.gradle file

cd app
sudo nano build.gradle
Enter fullscreen mode Exit fullscreen mode

Change these line from false to true

def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false
Enter fullscreen mode Exit fullscreen mode

Alt Text

Scroll down into signingConfigs and add this configuration below the debug

    release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
        }
Enter fullscreen mode Exit fullscreen mode

Then, in the buildTypes look in curly brackets for release change this line

signingConfig signingConfigs.debug
Enter fullscreen mode Exit fullscreen mode

to

signingConfig signingConfigs.release
Enter fullscreen mode Exit fullscreen mode

Also add this line below the minifyEnabled

shrinkResources true
Enter fullscreen mode Exit fullscreen mode

Alt Text

Then scroll down to the last line, add a closing curly bracket (}). I don't know I'm getting an error without this strange closing curly bracket.

Alt Text

The last thing, if you also want to build an universal apk file then scroll up and search for splits, inside the abi change universalApk from false to true. Save it.

Alt Text

Note: If your app doesn't contain any permission, make sure you don't have any use permission code inside AndroidManifest.xml.

Because by default, if you're not set the permission in the package.json, expo will automatically add every permission to your app and I'm having this issue when I was trying to publish to Google play store, so make sure you check that part.

Now everything is ready, time to build. Head back to android folder where the gradlew file exist. Log in terminal as super user, to avoid permission issues.

cd ..
sudo su
Enter fullscreen mode Exit fullscreen mode

If you want to build the .apk file, run this command

./gradlew assembleRelease
Enter fullscreen mode Exit fullscreen mode

Or if you want to build as a bundle (.aab) file run this command

./gradlew buildRelease
Enter fullscreen mode Exit fullscreen mode

In my case, this take about 5-18 minutes depending on your machine and your project. The output will be in app/build/outputs/apk/release for .apk and app/build/outputs/bundle/release for .aab.

Well, that's all I guess. Hope it help, thank you for reading and sorry for a bad English. Cheers~

💖 💪 🙅 🚩
awalariansyah
Awal Ariansyah

Posted on April 13, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related