Supercharge React Native Android app with Hermes

Facebook officially released the Hermes engine as an opt-in feature on Android. By enabling Hermes, Facebook claims that it will improve startup time, decrease memory usage and reduce app size. Let's find out!

Prerequisite

To enable Hermes, your app needs to be at least using React Native 0.60.4 and above. If you are using the earlier version of React Native, you may need to upgrade it with React Native Upgrade Helper.

Enable Hermes

Just a few simple steps that are required to enable Hermes in React Native.

Find the line of enableHermes: false in your app/build.gradle and change it to true.

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

If you are using proguard, add the following line in your proguard-rules.pro

-keep class com.facebook.hermes.unicode.** { *; }

You need to clean your project if you have built your app before.

$ cd android && ./gradlew clean
$ react-native run-android

Voila! Your Android app is now using Hermes engine.

Confirming Hermes is in Use

To verify if Hermes has been enabled, you can always verify it with the following code.

const isHermes = () => global.HermesInternal != null;

Analysing the result

Now, let's take a look at how much improvement that Hermes can do. I have enabled Hermes in one of my React Native app and let's look at the result

Spendie - An Expenses Tracking App

	Before Hermes	After Hermes	Improvement
App Size (APK)	26.4MB	16.8MB	36% size reduced

Common Issue about Hermes

#1 Build error in CI/CD environment

If you are using React Native 0.60.x, you may hit compilation error in your CI/CD environment such as TravisCI, CircleCI or even Github Actions.

Process 'command '../../node_modules/hermesvm/linux64-bin/hermes'' finished with non-zero exit value 135

This issue should be fixed in latest release of React Native 0.61.x. However, if you are not able to upgrade React Native version. You may apply the following fixes.

First, you need to install hermes-engine.

yarn add -D hermes-engine

Update the hermesCommand to use the hermes-engine in your app/build.gradle

project.ext.react = [
    entryFile: "index.js",
    enableHermes: true,
    hermesCommand: "../../node_modules/hermes-engine/%OS-BIN%/hermes", // Add this line
]

Change the hermesvm to hermes-engine in app/build.gradle

// Find this line
def hermesPath = "../../node_modules/hermesvm/android/";

// Change to the following
def hermesPath = "../../node_modules/hermes-engine/android/";

#2 Blank screen when upload to Play Store with bundle

Many issues have been reported that if you bundle your app and upload to Play Store, your app will show blank screen when start. To temporary fix this problem, you may use assemble instead of bundle at the moment.

Although you may faced some problem with Hermes engine but please feel free to enable Hermes for your React Native app and enjoy the performance boost!

To understand more about Hermes engine, you may read the Facebook post.