How to Increase Start up Speed of React Native Android App using Hermes

ByMohammed Rashid Posted on

Performance of Android apps built with react native is a bit lower when compared to the performance of iOS apps. So how to increase the performance of Android apps built with react native? The answer is by enabling Hermes.

Hermes is an open source JavaScript engine optimized for running react native Android apps. It helps to increase the start-up speed of your app and decrease your app size. It also helps to increase the efficiency of memory usage.

So, how to enable hermes in your react native project?

In order to enable hermes your react native version must be 0.60.2 or higher. Enabling it is pretty easy. All you need is to open YourProject/android/app/build.gradle file and make enableHermes key as true. By default, it would set as false.

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

After setting enableHermes as true, run the following command to clean the build.
cd android && ./gradlew clean

After cleaning just re-run your react native project using react-native run-android command. While running you can see Engine: Hermes is shown at the right top of your app- as given in the screenshot below.

Want to know more about enabling Hermes in react native? Then read the official document here.

About Me

I'm Mohammed Rashid from the beautiful state of Kerala in southern India, with a journey seasoned in software engineering and mobile app development.

In a tech world that's always changing, I keep myself updated with the latest like SwiftUI and Jetpack Compose for crafting native apps on iOS and Android. I have also experience in React Native and Flutter.

Through this space, I share my learnings and insights hoping to assist anyone diving into the native mobile app development.

Similar Posts

How to Make a Component Center Horizontal and Center Vertical in React Native

ByMohammed Rashid

Aligning a component center horizontally and vertically is very easy to do in React Native. You have to assign two props to the parent view to get the desired result. Use both the style props justifyContent and alignItems with the value ‘center‘ to make the component center to the parent view. The justifyContent prop aligns…

|

5 Console Tricks For Better Debugging in React Native

ByMohammed Rashid

The console.log() method is the easiest way to debug your code not only in React Native but also in other JavaScript apps. Simply showing the results in the console can save you time. What if you know some console tricks which can make your debugging better? Here, I am going through five cool console methods…

How to Place Text over Image in React Native

ByMohammed Rashid

By default, the elements of react native are arranged vertically. You can also arrange them horizontally using style properties. In this react native tutorial, let’s check how to place your Text component over the Image component. You can place text over an image in react native in multiple ways. The position style property can be…

How to Generate Random Colors in React Native

ByMohammed Rashid

Sometimes, you may want to generate random colors in your react native project. This short tutorial helps you to generate random colors and set them as background colors in react native. You can generate a random color using the following function in JavaScript. In the following react native example, there’s a FlatList with items that…

Leave a Reply