How to enable and use Hermes in a React Native app

Key takeaways:

• Hermes is a JavaScript engine optimized for React Native, bundled from version 0.70.

• It uses Ahead-of-Time (AOT) compilation, reducing runtime bytecode conversion.

• Improves app start time, reduces memory usage, and shrinks binary size using tree-shaking and minification.

• For React Native version ≥ 0.70, Hermes is enabled by default; older apps need upgrades.

• Android: Enable hermesEnabled=true in android/gradle.properties, clean the build, and rebuild the app.

• iOS: Set :hermes_enabled => true in ios/Podfile, install dependencies, and rebuild the app.

• Confirm Hermes with !!global.HermesInternal in the app's code.

• Debug Android apps using Chrome DevTools at chrome://inspect#devices.

• iOS apps require debugging configurations via Xcode or Chrome extensions.

Hermes is a an open-source JavaScript engine which is used for optimizing React Native apps. From React Native 0.70 onwards, Hermes is bundled with React Native—this distribution model is called bundled Hermes.

Before Hermes, React Native apps were read in bytecodes at runtime. This meant that the same code when run 100 times would be converted into bytecode before compilation. Hermes removes this redundancy in compilation by using an ahead-of-time compiler, which runs the code beforehand and optimizes it before runtime. Thus, the code can be efficiently mapped to memory at runtime, thus saving the start time of the app and the memory needed to store it during runtime.

Hermes offers the following advantages:

• Hermes reduces the time-to-interact (TTI), thus making the app functional in less time.

• Due to code optimization, the binary size of the app is reduced by using techniques like tree shaking and minificationMinification is the process of reducing file size by removing unnecessary characters without affecting functionality..

• The app consumes less memory after installation by using Ahead-of-Time (AOT) compilation.

How to enable Hermes in React Native

For apps created on a React Native version later than or equal to 0.70, Hermes is already enabled as the default engine, and we should be able to view it on the app welcome page. However, older apps require a React Native version of at least 0.64 on iOS but can use version 0.60.4 for Andriod to run Hermes. For older versions, we’ll first need to upgrade the React Native version before enabling Hermes.

To enable Hermes in a React Native app for Android, complete the following instructions:

1. Enable hermesEnabled in the android/gradle.properties file using the following code snippet:

2. If the app is already built, we'll need to clean it by running the following command in the terminal:

3. To test the installation of Hermes, use the HermesInternal global variable as follows:

To enable Hermes in a React Native app for iOS, follow these steps:

1. In your ios/Podfile, set the :hermes_enabled flag to true under the use_react_native! function:

2. After enabling Hermes in the Podfile, install the dependencies:

3. Rebuild the iOS app using Xcode or by running:

4. Use the HermesInternal global variable to confirm Hermes is enabled:

How to use Hermes

To use Hermes, first create a React Native app, navigate to the application folder, and run it using the following command:

For iOS, use the following command instead:

In Chrome, this can be done by following these steps:

1. Open a new tab and type chrome://inspect#devices. This is used to debug remote Android devices in Google Chrome.

2. Press the "Configure..." button and add the port address that your app is listening to.

3. Once the app appears under "Remote Target," it is available for debugging.

Quiz

Let's test the understanding of the concepts learned in this Answer with a short quiz.

Conclusion

Hermes enhances app performance by leveraging AOT compilation and efficient memory management, making it a valuable tool for React Native developers aiming for high-performing apps.