Switching React Native to Hermes: What Actually Changes at Build Time

The startup problem Hermes is meant to solve

You install your React Native app on an older Android device, tap the icon, and wait. The splash screen lingers while the JavaScript bundle is parsed and compiled. If your bundle is several megabytes, that parsing cost shows up as a slow cold start, especially on devices with limited CPU and memory.

Hermes is a JavaScript engine built for React Native. It compiles JavaScript to bytecode ahead of time, so the runtime loads precompiled bytecode instead of parsing source on launch. The engine is designed to reduce app size and improve startup time on Android and iOS.

Enabling Hermes in your project

On Android, open android/app/build.gradle. You need write access to the project and a working Gradle build. Add or update the React block:

project.ext.react = [
    enableHermes: true
]

On iOS, open ios/Podfile and pass the Hermes flag to the React Native helper:

use_react_native!(
  :path => File.dirname(require.resolve("react-native/package.json")),
  :hermes_enabled => true
)

Rebuild with npx react-native run-android or npx react-native run-ios. A clean rebuild is safest because Hermes adds native libraries to the binary. Expect longer build times on the first compile after the switch.

Verifying that Hermes is actually active

Check the build log for a line indicating Hermes is enabled. Then generate a production bundle so you can compare output size:

npx react-native bundle --dev false --platform android --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Run this from your project root. It overwrites the existing bundle, so back up index.android.bundle first if you need a rollback point. Compare the file size with and without Hermes enabled. On iOS, repeat the equivalent bundle command for the ios platform and inspect the Xcode build log.

Trade-offs and limitations

• Debugging: Chrome DevTools may not support all Hermes breakpoints. Use React Native Debugger or Flipper instead.
• Native modules: Some modules assume JavaScriptCore and may need workarounds under Hermes.
• Binary size: Hermes adds a small amount to the native binary, while potentially reducing the JS bundle size.

The brief supplied with this article reports a native binary increase of roughly 10–15 KB and a JS bundle reduction of 20–30 percent. Those are planning estimates, not verified measurements for your app. Verify them with your own bundle and profiler before you commit to a rollout.

Rolling back

Because enabling Hermes changes build configuration, rollback is straightforward: set enableHermes: false in android/app/build.gradle and :hermes_enabled => false in ios/Podfile, then rebuild. This restores JavaScriptCore as the engine.

Practical check before shipping

1. Build the app with Hermes enabled and record the JS bundle size.
2. Disable Hermes, rebuild, and record the bundle size again.
3. Measure cold-start time on a physical device using Android Profiler or Xcode Instruments.
4. Test your most important native modules and debugging workflows.

If startup improves and your modules still work, Hermes is likely a good fit. If debugging becomes harder or a module breaks, roll back and keep JavaScriptCore.

Note: The size and percentage figures above come from the supplied project brief and are not independently verified. Treat them as estimates to validate against your own build.