How I reduced my react-native (v0.63)app size from 63mb to 8.3mb (~87%)!

Journey to react-native

My journey to react-native started long back in 2017 with a minor college project which required iOS development of an android app, when I was very nascent to the JS world and react-native. Even with limited resources of react-native at that time, somehow I managed to cook it.

With some more pocket knowledge, soon I stepped into the world of open source. Lucky enough I found a project in react-native and ultimately got selected for GSoC, yeah !!

Why should you care about the app size?

Yeah so enough about my journey right, lets see why should we care about the app size.

Frankly speaking, in my initial journey I have never bothered about the size of the react-native app and accepted the large size as a CURSE of this framework. It is only recent when I have started deploying my personal apps to Play Store and the large size looks a sign of worry.

The first Single text app with size 12mb!

I made an app as simple as Hello World with just an additional npm package of admob. Asking myself, why would someone even download a single text application of 12mb! which would be of some KBs in the native android!

The second app with some animations of size 63mb!

Somehow I didn’t bother about the first app of 12mb and didn’t even try to reduce it. But this 63mb was NOT at all acceptable. Some of my android developer friends were already saying 12mb is too much for the first app and now this was 63mb with no rocket science and just a few npm packages.

Want to read this story later? Save it in Journal.

Implementing the change that did it! 63mb to 8.3mb

I know your eyes have been keenly looking for this, so without any more wait lets do this!

In your source folder navigate to android/app folder and open build.gradle and find this

You don’t need to do much, just toggle these and set

def enableSeparateBuildPerCPUArchitecture = true
def enableProguardInReleaseBuilds = true

And here your job is done! but wait, How does this actually work?

Talking about enableProguardInReleaseBuilds, setting this to true basically compresses the java byte code in the apk, roughly it’d bring down the size by 50%.

The enableSeparateBuildPerCPUArchitecture, works upon the benefits of different android architectures available, namely armebi and x86, the armebi being the most common. Setting this to true would create 4 different apk’s of about one-fourth size of (50%) the above step.

Uploading to PlayStore

Four different apk’s? Nothing to panic about, you won’t need to upload all the four apk’s to Play Store. We’ll use the new .aab format (apk-bundle) accepted by the Play Console. Google will take care of distributing correct apk to respective android architecture. I have tried this personally, so nothing to worry. You can find my second (63mb) app here.

Where do I get the .aab bundle file?

In your project, navigate to android folder and run this command

./gradlew bundleRelease

It’ll take some time to execute, once done find your bundle file in

android/app/build/outputs/release

If you run with the following error

FAILURE: Build failed with an exception.
What went wrong: Execution failed for task ':app:transformClassesAndResourcesWithR8ForDebug'.
GC overhead limit exceeded

Then you need the this line in your android/gradle.properties

org.gradle.jvmargs=-Xmx4096m

Awesome job! This was it guys, just pick this bundle, upload to play console and wait for you app to publish.

This was my first article on medium. I hope you liked it, make sure to give a Clap! Till we meet again.

📝 Save this story in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.