Skip to content

Commit dd27a86

Browse files
authored
chore: hermes, remove legacy debugging + old config (facebook#4249)
We're moving to the new debugger, so this legacy debugging just muddies the water. I've also updated the config to remove flipper references.
1 parent 5b7912d commit dd27a86

File tree

1 file changed

+2
-138
lines changed

1 file changed

+2
-138
lines changed

docs/hermes.md

Lines changed: 2 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@ Hermes is used by default by React Native and no additional configuration is req
1515
## Bundled Hermes
1616

1717
React Native comes with a **bundled version** of Hermes.
18-
We will be building a version of Hermes for you whenever we release a new version of React Native. This will make sure you're consuming a version of Hermes which is fully compatible with the version of React Native you're using.
19-
20-
Historically, we had problems with matching versions of Hermes with versions of React Native. This fully eliminates this problem, and offers users a JS engine that is compatible with the specific React Native version.
18+
We building a version of Hermes for you whenever we release a new version of React Native. This will make sure you're consuming a version of Hermes which is fully compatible with the version of React Native you're using.
2119

2220
This change is fully transparent to users of React Native. You can still disable Hermes using the command described in this page.
2321
You can [read more about the technical implementation on this page](/architecture/bundled-hermes).
@@ -88,136 +86,7 @@ yarn ios --mode Release
8886
</TabItem>
8987
</Tabs>
9088

91-
This will compile JavaScript to bytecode during build time which will improve your app's startup speed on device.
92-
93-
## Debugging JS on Hermes using Google Chrome's DevTools
94-
95-
Hermes supports the Chrome debugger by implementing the Chrome inspector protocol. This means Chrome's tools can be used to directly debug JavaScript running on Hermes, on an emulator or on a real, physical, device.
96-
97-
:::info
98-
Note that this is very different with the deprecated "Remote JS Debugging" from the In-App Dev Menu documented in the [Debugging](debugging#remote-debugging) section, which actually runs the JS code on Chrome's V8 on your development machine (laptop or desktop) instead of connecting to the JS engine running the app on your device.
99-
:::
100-
101-
Chrome connects to Hermes running on device via Metro, so you'll need to know where Metro is listening. Typically this will be on `localhost:8081`, but this is [configurable](https://metrobundler.dev/docs/configuration). When running `yarn start` the address is written to stdout on startup.
102-
103-
Once you know where the Metro server is listening, you can connect with Chrome using the following steps:
104-
105-
1. Navigate to `chrome://inspect` in a Chrome browser instance.
106-
107-
2. Use the `Configure...` button to add the Metro server address (typically `localhost:8081` as described above).
108-
109-
![Configure button in Chrome DevTools devices page](/docs/assets/HermesDebugChromeConfig.png)
110-
111-
![Dialog for adding Chrome DevTools network targets](/docs/assets/HermesDebugChromeMetroAddress.png)
112-
113-
3. You should now see a "Hermes React Native" target with an "inspect" link which can be used to bring up debugger. If you don't see the "inspect" link, make sure the Metro server is running. ![Target inspect link](/docs/assets/HermesDebugChromeInspect.png)
114-
115-
4. You can now use the Chrome debug tools. For example, to breakpoint the next time some JavaScript is run, click on the pause button and trigger an action in your app which would cause JavaScript to execute. ![Pause button in debug tools](/docs/assets/HermesDebugChromePause.png)
116-
117-
## Enabling Hermes on Older Versions of React Native
118-
119-
Hermes is the default engine as of React Native 0.70. This section explains how to enable Hermes on older versions of React Native.
120-
First, ensure you're using at least version 0.60.4 of React Native to enable Hermes on Android or 0.64 of React Native to enable Hermes on iOS.
121-
122-
If you have an existing app based on an earlier version of React Native, you will have to upgrade it first. See [Upgrading to new React Native Versions](/docs/upgrading) for how to do this. After upgrading the app, make sure everything works before trying to switch to Hermes.
123-
124-
:::caution Note for React Native compatibility
125-
Each Hermes release is aimed at a specific RN version. The rule of thumb is to always follow [Hermes releases](https://github.com/facebook/hermes/releases) strictly.
126-
Version mismatch can result in instant crash of your apps in the worst case scenario.
127-
:::
128-
129-
:::info Note for Windows users
130-
Hermes requires [Microsoft Visual C++ 2015 Redistributable](https://www.microsoft.com/en-us/download/details.aspx?id=48145).
131-
:::
132-
133-
### Android
134-
135-
Edit your `android/gradle.properties` file and make sure `hermesEnabled` is true:
136-
137-
```diff
138-
# Use this property to enable or disable the Hermes JS engine.
139-
# If set to false, you will be using JSC instead.
140-
hermesEnabled=true
141-
```
142-
143-
:::note
144-
This property was added in React Native 0.71. If you can't find it in your `gradle.properties` file, please refer to the documentation for the corresponding React Native version you're using.
145-
:::
146-
147-
Also, if you're using ProGuard, you will need to add these rules in `proguard-rules.pro` :
148-
149-
```
150-
-keep class com.facebook.hermes.unicode.** { *; }
151-
-keep class com.facebook.jni.** { *; }
152-
```
153-
154-
Next, if you've already built your app at least once, clean the build:
155-
156-
```shell
157-
$ cd android && ./gradlew clean
158-
```
159-
160-
That's it! You should now be able to develop and deploy your app as usual:
161-
162-
<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
163-
<TabItem value="npm">
164-
165-
```shell
166-
npm run android
167-
```
168-
169-
</TabItem>
170-
<TabItem value="yarn">
171-
172-
```shell
173-
yarn android
174-
```
175-
176-
</TabItem>
177-
</Tabs>
178-
179-
### iOS
180-
181-
Since React Native 0.64, Hermes also runs on iOS. To enable Hermes for iOS, edit your `ios/Podfile` file and make the change illustrated below:
182-
183-
```diff
184-
use_react_native!(
185-
:path => config[:reactNativePath],
186-
# to enable hermes on iOS, change `false` to `true` and then install pods
187-
# By default, Hermes is disabled on Old Architecture, and enabled on New Architecture.
188-
# You can enable/disable it manually by replacing `flags[:hermes_enabled]` with `true` or `false`.
189-
- :hermes_enabled => flags[:hermes_enabled],
190-
+ :hermes_enabled => true
191-
)
192-
```
193-
194-
By default, you will be using Hermes if you're on the New Architecture. By specifying a value such
195-
as `true` or `false` you can enable/disable Hermes as you wish.
196-
197-
Once you've configured it, you can install the Hermes pods with:
198-
199-
```shell
200-
$ cd ios && pod install
201-
```
202-
203-
That's it! You should now be able to develop and deploy your app as usual:
204-
205-
<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
206-
<TabItem value="npm">
207-
208-
```shell
209-
npm run ios
210-
```
211-
212-
</TabItem>
213-
<TabItem value="yarn">
214-
215-
```shell
216-
yarn ios
217-
```
218-
219-
</TabItem>
220-
</Tabs>
89+
This will compile JavaScript to Hermes Bytecode during build time which will improve your app's startup speed on device.
22190

22291
## Switching back to JavaScriptCore
22392

@@ -241,11 +110,6 @@ Edit your `ios/Podfile` file and make the change illustrated below:
241110
use_react_native!(
242111
:path => config[:reactNativePath],
243112
+ :hermes_enabled => false,
244-
# Enables Flipper.
245-
#
246-
# Note that if you have use_frameworks! enabled, Flipper will not work and
247-
# you should disable the next line.
248-
:flipper_configuration => flipper_config,
249113
# An absolute path to your application root.
250114
:app_path => "#{Pod::Config.instance.installation_root}/.."
251115
)

0 commit comments

Comments
 (0)