xref: /expo/docs/pages/guides/using-hermes.mdx (revision f734b125) 
1---
2title: Use Hermes Engine
3sidebar_title: Use Hermes
4description: A guide on configuring Hermes for both Android and iOS in an Expo project.
5---
6
7import { Collapsible } from '~/ui/components/Collapsible';
8
9[Hermes](https://hermesengine.dev/) is a JavaScript engine optimized for React Native. By compiling JavaScript into bytecode ahead of time, Hermes can improve your app start-up time. The binary size of Hermes is also smaller than other JavaScript engines, such as JavaScriptCore (JSC). It also uses less memory at runtime, which is particularly valuable on lower-end Android devices.
10
11## Support
12
13The Hermes engine is the default JavaScript engine used by Expo and it is fully supported across all Expo tooling. See the table below to check if your project is using a compatible version:
14
15| Platform | Expo Go | [Development Builds](/develop/development-builds/introduction/) |
16| -------- | ------- | --------------------------------------------------------------- |
17| Android  | SDK 42  | SDK 42                                                          |
18| iOS      | SDK 47  | SDK 43                                                          |
19
20<Collapsible summary="Using SDK 47 or lower?">
21
22For SDK 47 and lower, JSC is the default JavaScript engine and to use Hermes you need to add the `jsEngine` field in [app config](/workflow/configuration):
23
24{/* prettier-ignore */}
25```js
26{
27  "expo": {
28    /* @info Add the "jsEngine" field here. Supported values are "hermes" or "jsc" */
29    "jsEngine": "hermes"
30   /* @end */
31  }
32}
33```
34
35Development builds will need to be recompiled with `eas build`.
36
37</Collapsible>
38
39### Switch JavaScript engine on a specific platform
40
41You may want to use Hermes on one platform and JSC on another. One way to do this is to set the `"jsEngine"` to `"hermes"` at the top level and then override it with `"jsc"` under the `"ios"` key. You may alternatively prefer to explicitly set `"hermes"` on just the `"android"` key in this case.
42
43{/* prettier-ignore */}
44```js
45{
46  "expo": {
47    "jsEngine": "hermes",
48    "ios": {
49      /* @info jsEngine inside platform section will take precedence over the common field */
50      "jsEngine": "jsc"
51    /* @end */
52    }
53  }
54}
55```
56
57## Publish updates
58
59Publishing updates with `eas update` and `npx expo export` will generate Hermes bytecode bundles and their source maps.
60
61Please note that the Hermes bytecode format may change between different Hermes versions — an update produced for a specific version of Hermes will not run on a different version of Hermes. Starting from Expo SDK 46 (React Native 0.69), [Hermes is bundled within React Native](https://reactnative.dev/architecture/bundled-hermes). Updating React Native version or Hermes version can be thought of in the same way as updating any other native module. So if you update the `react-native` version you should also update the `runtimeVersion` in **app.json**. If you don't do this, your app may crash on launch because the update may be loaded by an existing binary that uses an older Hermes version that is incompatible with the updated bytecode format. See [`runtimeVersion`](/eas-update/runtime-versions/) for more information.
62
63## JavaScript debugger
64
65To debug JavaScript code running with Hermes, you can start your project with `npx expo start` then press <kbd>j</kbd> to open the debugger in Google Chrome or Microsoft Edge. The developer menu of development builds and Expo Go also have the **Open JS Debugger** option to do the same.
66
67Alternatively, you can use the JavaScript inspector from the following tools:
68
69- [Open Google Chrome DevTools manually](https://reactnative.dev/docs/hermes#debugging-js-on-hermes-using-google-chromes-devtools)
70- [Flipper](https://fbflipper.com/)
71
72### Troubleshooting
73
74> **warning** `No compatible apps connected. JavaScript Debugging can only be used with the Hermes engine.` when opening the debugger.
75
76- Make sure you [set up Hermes in the `jsEngine` field](#setup).
77- If your app is built by `eas build`, `npx expo run:android` or `npx expo run:ios`, make sure it is a debug build.
78- Internally, the app will establish a WebSocket connection, make sure your app is connected to the development server.
79
80  - Try to reload the app by pressing <kbd>r</kbd> in the Expo CLI Terminal UI.
81  - Test debugging availability by running the command: `curl http://127.0.0.1:8081/json/list` (adjust the `127.0.0.1:8081` to match your dev server URL). The HTTP response should be an array, as shown below. If it is an empty response, add either the `--localhost` or `--tunnel` flag to the `npx expo start` command.
82
83  ```json
84  [
85    {
86      "id": "0-2",
87      "description": "host.exp.Exponent",
88      "title": "Hermes ABI47_0_0React Native",
89      "faviconUrl": "https://react.dev/favicon.ico",
90      "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D2",
91      "type": "node",
92      "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=0&page=2",
93      "vm": "Hermes"
94    },
95    {
96      "id": "0--1",
97      "description": "host.exp.Exponent",
98      "title": "React Native Experimental (Improved Chrome Reloads)",
99      "faviconUrl": "https://react.dev/favicon.ico",
100      "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D-1",
101      "type": "node",
102      "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=0&page=-1",
103      "vm": "don't use"
104    }
105  ]
106  ```
107
108### Can I use Remote Debugging with Hermes?
109
110One of the many limitations of [remote debugging](/more/glossary-of-terms/#remote-debugging) is that it does not work with modules built on top of [JSI](https://github.com/react-native-community/discussions-and-proposals/issues/91), such as [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) version 2 or higher.
111
112Hermes supports [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/v8/) to debug JavaScript in place by connecting to the engine running on the device, as opposed to remote debugging, which executes JavaScript within a desktop Chrome tab. Hermes apps use this debugging technique automatically when you open the debugger in Expo Go or a development build.
113