[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 🤔

[matinzd]

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

[kristian-nst]

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? 🤔 ...

[LonelyCpp]

here's the patchfile for folks on worklet v0.8.3 (i'm hoping it'll be included in one of the upcoming releases)

react-native-worklets+0.8.3.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..59ed3da 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
@@ -16,57 +16,12 @@ namespace worklets {
 
 using namespace facebook;
 using namespace react;
-#if HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)
-using namespace facebook::hermes::inspector_modern;
-#endif // HERMES_ENABLE_DEBUGGER  && !defined(HERMES_V1_ENABLED)
-
-#if HERMES_ENABLE_DEBUGGER
-
-class HermesExecutorRuntimeAdapter
-#if HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)
-    : public RuntimeAdapter
-#endif // HERMES_ENABLE_DEBUGGER  && !defined(HERMES_V1_ENABLED)
-{
- public:
-  explicit HermesExecutorRuntimeAdapter(
-      facebook::hermes::HermesRuntime &hermesRuntime,
-      const std::shared_ptr<MessageQueueThread> &thread)
-      : hermesRuntime_(hermesRuntime), thread_(thread) {}
-
-  virtual ~HermesExecutorRuntimeAdapter() {
-    // This is required by iOS, because there is an assertion in the destructor
-    // that the thread was indeed `quit` before
-    thread_->quitSynchronous();
-  }
-#if HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)
-  facebook::hermes::HermesRuntime &getRuntime() override {
-    return hermesRuntime_;
-  }
-
-  // This is not empty in the original implementation, but we decided to tickle
-  // the runtime by running a small piece of code on every frame as using this
-  // required us to hold a refernce to the runtime inside this adapter which
-  // caused issues while reloading the app.
-  void tickleJs() override {}
-#endif // HERMES_ENABLE_DEBUGGER  && !defined(HERMES_V1_ENABLED)
-
- public:
-  facebook::hermes::HermesRuntime &hermesRuntime_;
-  std::shared_ptr<MessageQueueThread> thread_;
-};
-
-#endif // HERMES_ENABLE_DEBUGGER
 
 WorkletHermesRuntime::WorkletHermesRuntime(
     std::unique_ptr<facebook::hermes::HermesRuntime> runtime,
     const std::shared_ptr<MessageQueueThread> &jsQueue,
     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);
-#endif // HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)
-
 #ifndef NDEBUG
   facebook::hermes::HermesRuntime *wrappedRuntime = runtime_.get();
   jsi::Value evalWithSourceMap = jsi::Function::createFromHostFunction(
@@ -90,12 +45,7 @@ WorkletHermesRuntime::WorkletHermesRuntime(
 #endif // NDEBUG
 }
 
-WorkletHermesRuntime::~WorkletHermesRuntime() {
-#if HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)
-  // We have to disable debugging before the runtime is destroyed.
-  chrome::disableDebugging(debugToken_);
-#endif // HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)
-}
+WorkletHermesRuntime::~WorkletHermesRuntime() = default;
 
 } // namespace worklets
 
diff --git a/node_modules/react-native-worklets/Common/cpp/worklets/WorkletRuntime/WorkletHermesRuntime.h b/node_modules/react-native-worklets/Common/cpp/worklets/WorkletRuntime/WorkletHermesRuntime.h
index 199327e..d510063 100644
--- a/node_modules/react-native-worklets/Common/cpp/worklets/WorkletRuntime/WorkletHermesRuntime.h
+++ b/node_modules/react-native-worklets/Common/cpp/worklets/WorkletRuntime/WorkletHermesRuntime.h
@@ -17,17 +17,10 @@
 #include <string>
 #include <thread>
 
-#if HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)
-#include <hermes/inspector-modern/chrome/Registration.h>
-#endif // HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)
-
 namespace worklets {
 
 using namespace facebook;
 using namespace react;
-#if HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)
-using namespace facebook::hermes::inspector_modern;
-#endif // HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)
 
 // ReentrancyCheck is copied from React Native
 // from ReactCommon/hermes/executor/HermesExecutorFactory.cpp
@@ -114,9 +107,6 @@ class WorkletHermesRuntime : public jsi::WithRuntimeDecorator<WorkletsReentrancy
  private:
   std::unique_ptr<facebook::hermes::HermesRuntime> runtime_;
   WorkletsReentrancyCheck reentrancyCheck_;
-#if HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)
-  chrome::DebugSessionToken debugToken_;
-#endif // HERMES_ENABLE_DEBUGGER && !defined(HERMES_V1_ENABLED)
 };
 
 } // namespace worklets

[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.

[a-eid]

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