How to Set Up Hermes in React Native

Hermes is a Javascript engine that is optimized for React Native and works for both Android and iOS. Hermes is an open source library that has been found to have potential upsides for performance in many apps such as improved start-up time, more efficient, hence reduced memory usage and a smaller app size. At the time of writing this Hermes still remains an opt-in feature and you have to make sure that the React Native version of your project is at least 0.60.4 otherwise you won’t be able to use this very resourceful library.

In this article, we are going to learn how we can set up Hermes in our React Native projects, and how we can test whether it does have significant performance improvements on our codebase.

How to Enable Hermes in React Native

Before you go ahead to enable Hermes for your React Native project, you have to confirm that the Hermes version on your project matches the React Native version of your project to avoid a potential instant app crash. See Hermes Releases page for more details.

Android

After your check is complete, add this line to the android/app/build.gradle

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

For projects that have Proguard, enabled add the following rules so that Hermes does not get stripped from your release bytecode.

PS: Proguard is a tool that helps reduce apk size of your app marginally by stripping parts of the React Native Java bytecode that your app is not using. This only works for Android.

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

Then you have to fully clean the project and rebuild the app and rerun:

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

iOS

Make the following change to ios/Podfile

   use_react_native!(
     :path => config[:reactNativePath],
     # to enable hermes on iOS, change `false` to `true` and then install pods
-    :hermes_enabled => false
+    :hermes_enabled => true
   )

then install the Pods and rerun the app:

cd ios && pod install && cd .. && react-native run-ios

If you are testing on a fresh project you should see a confirmation that Hermes is being used on the top right portion of the screen otherwise you can simply log the environment variable.

const isHermes = () => !!global.HermesInternal;
console.log(isHermes());

Testing the Hermes Integration

In the beginning of this article we highlighted how the Hermes library could help your app so let us go ahead to test the three things: reduced app size, improved start-up time. For the purpose of this testing I will create two projects one with Hermes enabled and the other one without Hermes enabled and compare their performances side by side.

1. Start-up time

Measuring the startup time by using the Delayed flag in the Logcat yielded varying values that didn’t specify if Hermes was indeed impactful in the start-up time

05-31 18:55:07.552 8307 8363 I ActivityTaskManager: Displayed com.no_hermes_enabled/.MainActivity: +3s144ms

05-31 18:55:40.260 8307 8363 I ActivityTaskManager: Displayed com.hermes_enabled/.MainActivity: +3s525ms

So in conclusion here, on an empty React Native app (that basically has no functionality aside from the initial default screen), Hermes has no effect on the startup time performance.

2. Memory Usage

Hermes slightly helped improve the memory management compared to the app without Hermes. On Android, this can be measured by checking Android Studio Profiler by clicking on View>Tools Window>Profiler.

3. App Size

The. size of the app bundle on the right without Hermes enabled is about 47% larger than the app with Hermes enabled. This is craaazy! Such a huge app size improvement!

Connecting Hermes to Google Chrome

Hermes as a Javascript framework also provides a debugging feature that provides good stuff like Memory profiling and breakpointing your Javascript code. It does this via the Chrome developer tools and it is enabled by taking the following steps:

1. Open chrome://inspect on your browser tab.

2. Click on Configure and add Metro server address localhost:8081 on the modal that appears .

3. Click on the inspect button under Hermes React Native to take advantage of the Developer tools.

Conclusion

We have successfully gone through how to enable Hermes (available for Android and iOS) in a React Native project. We also tested out if Hermes is actually positively impactful in React Native projects. Then we also learned how to enable debugging using Hermes through the Chrome developer tools.

Is Hermes impactful on your app? Let us know in the comments! Also, please help us out by sharing the tutorial with your communities.