[0.83] Multi-host compatibility for Network and Performance in React Native DevTools

[huntie]

Multiple React Native hosts warning

If you're on this page, you might have seen the following message in React Native DevTools in versions 0.83 and onwards. This happens when we've conditionally disabled the Performance and Network features, based on detecting a multiple React Native host setup.

What this means

The Network and Performance features cross over with parts of React Native's architecture that exist outside the scope of a given React Native Host, breaking out of the strict lifecycle model for our debugger. As such, this could lead to undefined behaviour via data being emitted across hosts — so we are disabling these features for safety.

Having multiple hosts in a React Native app is not the default configuration, and does not happen under the Community Template or Expo, but may exist in some specialist or brownfield app setups.

When are we fixing this?

We have a design for correctly scoping these features so that we can safely support them under multiple hosts, and intend to update them in future. However, we have no planned timeline for this fix at this moment.

[mjmasn]

[Resolved in RC5] Multi-host detection false positive for legacy Hermes ConnectionDemux targets (Reanimated / react-native-worklets)

@huntie just to check, if we're seeing the '...multiple React Native hosts, which is not currently supported' message on the network and performance tabs in RN 0.83.0-rc.x, is that likely due to something like react-native-worklets (used by react-native-reanimated)?

[dannyhw]

[In progress] Expo Go launcher compatibility

hi @huntie I seem to be getting this in expo go apps, is that expected? (expo 55, react native 83)

[MaganAnkur]

I am using 0.83.4 but still getting it

[colaquecez]

@MaganAnkur did you update the react-native-worklets? I needed to also downgrade that to 0.7.2

[MaganAnkur]

Yes @colaquecez here is my dependency list: #954 (reply in thread)

[darpsoft]

I'm using

"react-native": "0.83.8"
"react-native-reanimated": "4.3.0"
"react-native-worklets": "0.8.1"

And I applied this patch—it works perfectly for me.

react-native-worklets+0.8.1.patch

diff --git a/node_modules/react-native-worklets/Common/cpp/worklets/WorkletRuntime/WorkletHermesRuntime.cpp b/node_modules/react-native-worklets/Common/cpp/worklets/WorkletRuntime/WorkletHermesRuntime.cpp
index 22388b6..3ec7882 100644
--- a/node_modules/react-native-worklets/Common/cpp/worklets/WorkletRuntime/WorkletHermesRuntime.cpp
+++ b/node_modules/react-native-worklets/Common/cpp/worklets/WorkletRuntime/WorkletHermesRuntime.cpp
@@ -63,8 +63,12 @@ WorkletHermesRuntime::WorkletHermesRuntime(
     const std::string &name)
     : jsi::WithRuntimeDecorator<WorkletsReentrancyCheck>(*runtime, reentrancyCheck_), runtime_(std::move(runtime)) {
 #if HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)
-  auto adapter = std::make_unique<HermesExecutorRuntimeAdapter>(*runtime_, jsQueue);
-  debugToken_ = chrome::enableDebugging(std::move(adapter), name);
+  // Skip worklet debug target registration to avoid RN 0.83.5+ false-positive
+  // "multiple React Native hosts" in DevTools, which disables Network and
+  // Performance tabs. See react-native-community/discussions-and-proposals#954.
+  (void)jsQueue;
+  (void)name;
 #endif // HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)

 #ifndef NDEBUG
@@ -92,8 +96,7 @@ WorkletHermesRuntime::WorkletHermesRuntime(

 WorkletHermesRuntime::~WorkletHermesRuntime() {
 #if HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)
-  // We have to disable debugging before the runtime is destroyed.
-  chrome::disableDebugging(debugToken_);
+  // Paired with skipped enableDebugging above.
 #endif // HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)
 }

[fahey252]

I was able to get Network Inspect working with the following versions in an Expo context without any patches, although goes against Expo dependency validation via npx expo-doctor

• "expo": "^55.0.18",
• "react-native": "0.83.4",
• "react-native-reanimated": "4.3.0",
• "react-native-worklets": "0.8.1",

[oskarnellfors]

does not happen under the Community Template or Expo

Well I just updated to Expo 55, without using Expo Go, and is having this issue 🤔

[oskarnellfors]

@LonelyCpp Real MVP 🥇

[matinzd]

Try patching using this commit locally for now until reanimated team releases a new version.

IT WORKSSS! <3 What does reanimated worklets have to do with networking lol? 🤔 ...

AFAIK, reanimated's worklets run in a separate Hermes runtime, and worklets runtime was still relying on the legacy Hermes CDP debugger integration. CDP (Chrome DevTools Protocol) is the protocol used for communication between the runtime and debugging tools like Chrome or React Native DevTools. The legacy setup was conflicting with React Native’s newer CDP inspector implementation, leading to issues such as broken network inspection.

[branaust]

finally... thank you!

[coolsoftwaretyler]

Upgrading to React Native Reanimated 4.4.0 and React Native Worklets 0.9.1 fixed this on my end with Expo 55.

[mvanroon]

It was indeed fixed in this PR which shipped in React Native Reanimated 4.4.0.

For those using Expo, current main branch pins react-native-reanimated pin to 4.5.0. With other words: this issue should be fixed in the next Expo SDK.

[a-eid]

what is this ? network inspection just stopped idk why ..
what does multiple hosts ... even mean ..

[maxRN]

Please check the previous comments, maybe it fixes your problem: #954 (reply in thread)