DEV Community

Kyle Buntin
Kyle Buntin

Posted on • Updated on • Originally published at quickcomponent.com

How to Reduce your Android release App size, up to 47% or even more — React Native

image

After finished developing and building your app, you then realise that it is somewhat bigger than what you prefer.
The first thought that comes to your mind is "how can this be reduced?"
Consider using Hermes to achieve this.

In one of our apps at Quick Component, we experienced about 19.2 percent decrease in app size when building release with Hermes. See the image below.

Without Hermes
image

With Hermes
image

Also checkout another app where about 47% decrease in app size was experienced using Hermes.
image

How do we build with Hermes?
You only need to edit one or two files.

In android/app/build.gradle enable Hermes

 project.ext.react = [     
    entryFile: "index.js",          
    enableHermes: true  // clean and rebuild if changing 
 ]
Enter fullscreen mode Exit fullscreen mode

Also, if you're using ProGuard, you will need to add this rule in proguard-rules.pro :

-keep class com.facebook.hermes.unicode.** { *; }
Enter fullscreen mode Exit fullscreen mode

Next, if you've already built your app at least once, clean the build:

$ cd android && ./gradlew clean
Enter fullscreen mode Exit fullscreen mode

And now you can build ur release as you would normally do with

./gradlew bundleRelease
Enter fullscreen mode Exit fullscreen mode

Also note that There are other benefits to using hermes like stated here:
Hermes is an open-source JavaScript engine optimized for running React Native apps on Android.
For many apps, enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size.

Also, ensure you're using at least version 0.60.4 of React Native.

Checkout a fully functioning templates with backend like the Dating app, Whatsapp clone(with audio and video calling), UberEats clone and more built with React Native.

Top comments (0)