DEV Community

loading...
Cover image for A Tale of Reducing Expo/React Native Android Application

A Tale of Reducing Expo/React Native Android Application

awalariansyah profile image awalariansyah Updated on ・4 min read

Hello, folks! My name is Awal Ariansyah and this my first post contribution on Dev.to! 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

sudo apt-get install default-jre

Check the installation

java -version

Install JDK

sudo apt-get install defalut-jdk

Check the installation

javac -version

Alt Text

Install Expo Command Line

sudo npm install --global expo-cli

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

Set up licenses

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

cd /usr/lib/android-sdk/

We need to accept the license before using the sdk

sudo yes | sdkmanager --licenses

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

sudo chmod -R 0777 /tmp

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

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

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

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

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

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 defauly, 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

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

./gradlew assembleRelease

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

./gradlew buildRelease

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~

Discussion (0)

pic
Editor guide