react-native-windows 0.80.1 → 0.81.0-preview.1

package/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp

@@ -80,6 +80,12 @@ void WindowsTextLayoutManager::GetTextLayout(
     TextMeasurement::Attachments &attachments) noexcept {
   const auto &attributedString = attributedStringBox.getValue();
   auto fragments = attributedString.getFragments();
+
+  // Check if fragments is empty to avoid out-of-bounds access
+  if (fragments.empty()) {
+    return;
+  }
+
   auto outerFragment = fragments[0];
 
   DWRITE_FONT_STYLE style = DWRITE_FONT_STYLE_NORMAL;
@@ -375,47 +381,45 @@ TextMeasurement TextLayoutManager::measure(
   TextMeasurement measurement{};
   auto &attributedString = attributedStringBox.getValue();
 
-  measurement = textMeasureCache_.get(
-      {attributedString, paragraphAttributes, layoutConstraints}, [&](TextMeasureCacheKey const &key) {
-        auto telemetry = TransactionTelemetry::threadLocalTelemetry();
-        if (telemetry) {
-          telemetry->willMeasureText();
-        }
+  measurement = textMeasureCache_.get({attributedString, paragraphAttributes, layoutConstraints}, [&]() {
+    auto telemetry = TransactionTelemetry::threadLocalTelemetry();
+    if (telemetry) {
+      telemetry->willMeasureText();
+    }
 
-        winrt::com_ptr<IDWriteTextLayout> spTextLayout;
-
-        TextMeasurement::Attachments attachments;
-        WindowsTextLayoutManager::GetTextLayout(
-            attributedStringBox, paragraphAttributes, layoutConstraints.maximumSize, spTextLayout, attachments);
-
-        if (spTextLayout) {
-          auto maxHeight = std::numeric_limits<float>().max();
-          if (paragraphAttributes.maximumNumberOfLines > 0) {
-            std::vector<DWRITE_LINE_METRICS> lineMetrics;
-            uint32_t actualLineCount;
-            spTextLayout->GetLineMetrics(nullptr, 0, &actualLineCount);
-            lineMetrics.resize(static_cast<size_t>(actualLineCount));
-            winrt::check_hresult(spTextLayout->GetLineMetrics(lineMetrics.data(), actualLineCount, &actualLineCount));
-            maxHeight = 0;
-            const auto count =
-                std::min(static_cast<uint32_t>(paragraphAttributes.maximumNumberOfLines), actualLineCount);
-            for (uint32_t i = 0; i < count; ++i) {
-              maxHeight += lineMetrics[i].height;
-            }
-          }
-
-          DWRITE_TEXT_METRICS dtm{};
-          winrt::check_hresult(spTextLayout->GetMetrics(&dtm));
-          measurement.size = {dtm.width, std::min(dtm.height, maxHeight)};
-          measurement.attachments = attachments;
-        }
+    winrt::com_ptr<IDWriteTextLayout> spTextLayout;
+
+    TextMeasurement::Attachments attachments;
+    WindowsTextLayoutManager::GetTextLayout(
+        attributedStringBox, paragraphAttributes, layoutConstraints.maximumSize, spTextLayout, attachments);
 
-        if (telemetry) {
-          telemetry->didMeasureText();
+    if (spTextLayout) {
+      auto maxHeight = std::numeric_limits<float>().max();
+      if (paragraphAttributes.maximumNumberOfLines > 0) {
+        std::vector<DWRITE_LINE_METRICS> lineMetrics;
+        uint32_t actualLineCount;
+        spTextLayout->GetLineMetrics(nullptr, 0, &actualLineCount);
+        lineMetrics.resize(static_cast<size_t>(actualLineCount));
+        winrt::check_hresult(spTextLayout->GetLineMetrics(lineMetrics.data(), actualLineCount, &actualLineCount));
+        maxHeight = 0;
+        const auto count = std::min(static_cast<uint32_t>(paragraphAttributes.maximumNumberOfLines), actualLineCount);
+        for (uint32_t i = 0; i < count; ++i) {
+          maxHeight += lineMetrics[i].height;
         }
+      }
+
+      DWRITE_TEXT_METRICS dtm{};
+      winrt::check_hresult(spTextLayout->GetMetrics(&dtm));
+      measurement.size = {dtm.width, std::min(dtm.height, maxHeight)};
+      measurement.attachments = attachments;
+    }
+
+    if (telemetry) {
+      telemetry->didMeasureText();
+    }
 
-        return measurement;
-      });
+    return measurement;
+  });
   return measurement;
 }
 

package/Microsoft.ReactNative/Fabric/platform/react/threading/TaskDispatchThread.cpp

@@ -12,8 +12,11 @@
 
 #include <folly/portability/SysResource.h>
 #include <folly/system/ThreadName.h>
-#include <chrono>
+#include <condition_variable>
 #include <future>
+#include <mutex>
+#include <queue>
+#include <thread>
 #include <utility>
 
 #include <glog/logging.h>
@@ -25,40 +28,88 @@
 
 namespace facebook::react {
 
-TaskDispatchThread::TaskDispatchThread(std::string threadName, int priorityOffset) noexcept
-    : threadName_(std::move(threadName)) {
-#ifdef ANDROID
-  // Attaches the thread to JVM just in case anything calls out to Java
-  thread_ = std::thread([&]() {
-    facebook::jni::ThreadScope::WithClassLoader([&]() {
-      int result = setpriority(PRIO_PROCESS, static_cast<pid_t>(::syscall(SYS_gettid)), priorityOffset);
+class TaskDispatchThread::Impl : public std::enable_shared_from_this<TaskDispatchThread::Impl> {
+ public:
+  Impl(std::string &&threadName) noexcept;
+  ~Impl() noexcept;
+
+  void start() noexcept;
+  bool isOnThread() noexcept;
+  bool isRunning() noexcept;
+  void runAsync(TaskFn &&task, std::chrono::milliseconds delayMs = std::chrono::milliseconds::zero()) noexcept;
+  void runSync(TaskFn &&task) noexcept;
+  void quit() noexcept;
+  void loop() noexcept;
+
+ private:
+  struct Task {
+    TimePoint dispatchTime;
+    TaskFn fn;
+
+    Task(TimePoint dispatchTime, TaskFn &&fn) : dispatchTime(dispatchTime), fn(std::move(fn)) {}
+
+    bool operator<(const Task &other) const {
+      // Have the earliest tasks be at the front of the queue.
+      return dispatchTime > other.dispatchTime;
+    }
+  };
+
+  std::mutex queueLock_;
+  std::condition_variable loopCv_;
+  std::priority_queue<Task> queue_;
+  std::atomic<bool> running_{true};
+  std::string threadName_;
+  std::thread thread_;
+};
+
+TaskDispatchThread::TaskDispatchThread(std::string threadName, int /*priorityOffset*/) noexcept
+    : impl_(std::make_shared<Impl>(std::move(threadName))) {
+  impl_->start();
+}
 
-      if (result != 0) {
-        LOG(INFO) << " setCurrentThreadPriority failed with pri errno: " << errno;
-      }
+TaskDispatchThread::~TaskDispatchThread() noexcept {
+  impl_->quit();
+}
 
-      loop();
-    });
-  });
+bool TaskDispatchThread::isOnThread() noexcept {
+  return impl_->isOnThread();
+}
 
-#else
-  thread_ = std::thread(&TaskDispatchThread::loop, this);
-#endif
+bool TaskDispatchThread::isRunning() noexcept {
+  return impl_->isRunning();
 }
 
-TaskDispatchThread::~TaskDispatchThread() noexcept {
+void TaskDispatchThread::runAsync(TaskFn &&task, std::chrono::milliseconds delayMs) noexcept {
+  impl_->runAsync(std::move(task), delayMs);
+}
+
+void TaskDispatchThread::runSync(TaskFn &&task) noexcept {
+  impl_->runSync(std::move(task));
+}
+
+void TaskDispatchThread::quit() noexcept {
+  impl_->quit();
+}
+
+TaskDispatchThread::Impl::Impl(std::string &&threadName) noexcept : threadName_(std::move(threadName)) {}
+
+TaskDispatchThread::Impl::~Impl() noexcept {
   quit();
 }
 
-bool TaskDispatchThread::isOnThread() noexcept {
+void TaskDispatchThread::Impl::start() noexcept {
+  thread_ = std::thread([self = shared_from_this()]() { self->loop(); });
+}
+
+bool TaskDispatchThread::Impl::isOnThread() noexcept {
   return std::this_thread::get_id() == thread_.get_id();
 }
 
-bool TaskDispatchThread::isRunning() noexcept {
+bool TaskDispatchThread::Impl::isRunning() noexcept {
   return running_;
 }
 
-void TaskDispatchThread::runAsync(TaskFn &&task, std::chrono::milliseconds delayMs) noexcept {
+void TaskDispatchThread::Impl::runAsync(TaskFn &&task, std::chrono::milliseconds delayMs) noexcept {
   if (!running_) {
     return;
   }
@@ -68,7 +119,7 @@ void TaskDispatchThread::runAsync(TaskFn &&task, std::chrono::milliseconds delay
   loopCv_.notify_one();
 }
 
-void TaskDispatchThread::runSync(TaskFn &&task) noexcept {
+void TaskDispatchThread::Impl::runSync(TaskFn &&task) noexcept {
   std::promise<void> promise;
   runAsync([&]() {
     if (running_) {
@@ -79,7 +130,7 @@ void TaskDispatchThread::runSync(TaskFn &&task) noexcept {
   promise.get_future().wait();
 }
 
-void TaskDispatchThread::quit() noexcept {
+void TaskDispatchThread::Impl::quit() noexcept {
   if (!running_) {
     return;
   }
@@ -94,7 +145,7 @@ void TaskDispatchThread::quit() noexcept {
   }
 }
 
-void TaskDispatchThread::loop() noexcept {
+void TaskDispatchThread::Impl::loop() noexcept {
   if (!threadName_.empty()) {
     folly::setThreadName(threadName_);
   }

package/Microsoft.ReactNative/Fabric/platform/react/threading/TaskDispatchThread.h

@@ -11,11 +11,8 @@
 #pragma once
 
 #include <chrono>
-#include <condition_variable>
 #include <functional>
-#include <mutex>
-#include <queue>
-#include <thread>
+#include <memory>
 
 namespace facebook::react {
 
@@ -47,27 +44,9 @@ class TaskDispatchThread {
   /** Shut down and clean up the thread. */
   void quit() noexcept;
 
- protected:
-  struct Task {
-    TimePoint dispatchTime;
-    TaskFn fn;
-
-    Task(TimePoint dispatchTime, TaskFn &&fn) : dispatchTime(dispatchTime), fn(std::move(fn)) {}
-
-    bool operator<(const Task &other) const {
-      // Have the earliest tasks be at the front of the queue.
-      return dispatchTime > other.dispatchTime;
-    }
-  };
-
-  void loop() noexcept;
-
-  std::mutex queueLock_;
-  std::condition_variable loopCv_;
-  std::priority_queue<Task> queue_;
-  std::atomic<bool> running_{true};
-  std::string threadName_;
-  std::thread thread_;
+ private:
+  class Impl;
+  std::shared_ptr<Impl> impl_;
 };
 
 } // namespace facebook::react

package/Microsoft.ReactNative/JsiApi.cpp

@@ -479,7 +479,7 @@ facebook::jsi::JSError const &jsError) {                             \
       }();
     )JS");
   // TODO: consider implementing this script as a resource file and loading it with the resource URL.
-  jsiRuntime->evaluateJavaScript(jsiPalBuffer, "Form_JSI_API_not_a_real_file");
+  jsiRuntime->evaluateJavaScript(jsiPalBuffer, "jsi-internal://host-function-manager.js");
   ReactNative::JsiRuntime abiJsiResult{make<JsiRuntime>(Mso::Copy(jsiRuntimeHolder), Mso::Copy(jsiRuntime))};
   std::scoped_lock lock{s_mutex};
   auto it = s_jsiRuntimeMap.try_emplace(reinterpret_cast<uintptr_t>(jsiRuntime.get()), abiJsiResult);

package/Microsoft.ReactNative/Microsoft.ReactNative.vcxproj

@@ -268,6 +268,7 @@
       <SubType>Code</SubType>
     </ClInclude>
     <ClInclude Include="ReactHost\AsyncActionQueue.h" />
+    <ClInclude Include="ReactHost\DebuggerNotifications.h" />
     <ClInclude Include="ReactHost\InstanceFactory.h" />
     <ClInclude Include="ReactHost\IReactInstanceInternal.h" />
     <ClInclude Include="ReactHost\JSBundle.h" />

package/Microsoft.ReactNative/Microsoft.ReactNative.vcxproj.filters

@@ -313,6 +313,9 @@
     <ClInclude Include="ReactHost\AsyncActionQueue.h">
       <Filter>ReactHost</Filter>
     </ClInclude>
+    <ClInclude Include="ReactHost\DebuggerNotifications.h">
+      <Filter>ReactHost</Filter>
+    </ClInclude>    
     <ClInclude Include="ReactHost\InstanceFactory.h">
       <Filter>ReactHost</Filter>
     </ClInclude>

package/Microsoft.ReactNative/Modules/Animated/NativeAnimatedNodeManager.h

@@ -6,8 +6,6 @@
 
 #include <IReactInstance.h>
 #include <UI.Xaml.Media.h>
-#include <cxxreact/CxxModule.h>
-#include <folly/dynamic.h>
 #include "AnimatedNode.h"
 #include "AnimationDriver.h"
 #include "EventAnimationDriver.h"

package/Microsoft.ReactNative/Modules/AppThemeModuleUwp.cpp

@@ -13,7 +13,6 @@
 #include <Utils/ValueUtils.h>
 #include <XamlUIService.h>
 #include <XamlUtils.h>
-#include <cxxreact/CxxModule.h>
 #include <functional>
 #include <memory>
 #if _MSC_VER <= 1913

package/Microsoft.ReactNative/Modules/CreateModules.cpp

@@ -7,9 +7,6 @@
 #include <React.h>
 #include <ReactPropertyBag.h>
 
-// React Native
-#include <cxxreact/CxxModule.h>
-
 // Windows API
 #include <winrt/Windows.Security.Cryptography.Certificates.h>
 

package/Microsoft.ReactNative/Modules/NativeUIManager.cpp

@@ -931,8 +931,21 @@ void NativeUIManager::ApplyLayout(int64_t tag, float width, float height) {
 }
 
 void NativeUIManager::SetLayoutPropsRecursive(int64_t tag) {
-  ShadowNodeBase &shadowNode = static_cast<ShadowNodeBase &>(m_host->GetShadowNodeForTag(tag));
+  if (!m_host) {
+    return;
+  }
+
+  auto *shadowNodePtr = m_host->FindShadowNodeForTag(tag);
+  if (!shadowNodePtr) {
+    return;
+  }
+
+  ShadowNodeBase &shadowNode = static_cast<ShadowNodeBase &>(*shadowNodePtr);
   auto *pViewManager = shadowNode.GetViewManager();
+  if (!pViewManager) {
+    return;
+  }
+
   if (!pViewManager->IsNativeControlWithSelfLayout()) {
     for (const auto child : shadowNode.m_children) {
       SetLayoutPropsRecursive(child);
@@ -951,18 +964,21 @@ void NativeUIManager::SetLayoutPropsRecursive(int64_t tag) {
     float height = YGNodeLayoutGetHeight(yogaNode);
     auto view = shadowNode.GetView();
     auto pViewManager = shadowNode.GetViewManager();
-    pViewManager->SetLayoutProps(shadowNode, view, left, top, width, height);
-    if (shadowNode.m_onLayoutRegistered) {
-      const auto hasLayoutChanged = !YogaFloatEquals(left, shadowNode.m_layout.Left) ||
-          !YogaFloatEquals(top, shadowNode.m_layout.Top) || !YogaFloatEquals(width, shadowNode.m_layout.Width) ||
-          !YogaFloatEquals(height, shadowNode.m_layout.Height);
-      if (hasLayoutChanged) {
-        React::JSValueObject layout{{"x", left}, {"y", top}, {"height", height}, {"width", width}};
-        React::JSValueObject eventData{{"target", tag}, {"layout", std::move(layout)}};
-        pViewManager->DispatchCoalescingEvent(tag, L"topLayout", MakeJSValueWriter(std::move(eventData)));
+
+    if (pViewManager) {
+      pViewManager->SetLayoutProps(shadowNode, view, left, top, width, height);
+      if (shadowNode.m_onLayoutRegistered) {
+        const auto hasLayoutChanged = !YogaFloatEquals(left, shadowNode.m_layout.Left) ||
+            !YogaFloatEquals(top, shadowNode.m_layout.Top) || !YogaFloatEquals(width, shadowNode.m_layout.Width) ||
+            !YogaFloatEquals(height, shadowNode.m_layout.Height);
+        if (hasLayoutChanged) {
+          React::JSValueObject layout{{"x", left}, {"y", top}, {"height", height}, {"width", width}};
+          React::JSValueObject eventData{{"target", tag}, {"layout", std::move(layout)}};
+          pViewManager->DispatchCoalescingEvent(tag, L"topLayout", MakeJSValueWriter(std::move(eventData)));
+        }
       }
+      shadowNode.m_layout = {left, top, width, height};
     }
-    shadowNode.m_layout = {left, top, width, height};
   }
 }
 

package/Microsoft.ReactNative/Modules/PaperUIManagerModule.cpp

@@ -501,7 +501,15 @@ class UIManagerModule : public std::enable_shared_from_this<UIManagerModule>, pu
   }
 
   void DropView(int64_t tag, bool removeChildren = true, bool zombieView = false) {
+    // Prevent re-entry and double deletion which can cause memory corruption
+    if (m_nodesBeingDropped.find(tag) != m_nodesBeingDropped.end()) {
+      return;
+    }
+
     if (auto node = m_nodeRegistry.findNode(tag)) {
+      // Mark this node as being dropped
+      m_nodesBeingDropped.insert(tag);
+
       node->onDropViewInstance();
 
       m_nativeUIManager->RemoveView(*node, removeChildren);
@@ -509,14 +517,21 @@ class UIManagerModule : public std::enable_shared_from_this<UIManagerModule>, pu
       if (zombieView)
         node->m_zombie = true;
 
-      for (auto childTag : node->m_children)
+      // Make a copy of children to avoid iterator invalidation
+      auto children = node->m_children;
+      for (auto childTag : children) {
         DropView(childTag, removeChildren, zombieView);
+      }
 
       if (removeChildren)
         node->removeAllChildren();
 
-      if (!zombieView)
+      if (!zombieView) {
         m_nodeRegistry.removeNode(tag);
+      }
+
+      // Remove from tracking set
+      m_nodesBeingDropped.erase(tag);
     }
   }
 
@@ -525,6 +540,8 @@ class UIManagerModule : public std::enable_shared_from_this<UIManagerModule>, pu
   ShadowNodeRegistry m_nodeRegistry;
   std::shared_ptr<NativeUIManager> m_nativeUIManager;
   const React::JSValueObject accessibilityEventTypes = React::JSValueObject{{"typeViewFocused", 8}};
+  // Track nodes being dropped to prevent double-deletion and corruption
+  std::unordered_set<int64_t> m_nodesBeingDropped;
 };
 
 UIManager::UIManager() : m_module(std::make_shared<UIManagerModule>()) {}

package/Microsoft.ReactNative/QuirkSettings.cpp

@@ -77,6 +77,12 @@ winrt::Microsoft::ReactNative::ReactPropertyId<bool> UseRuntimeSchedulerProperty
   return propId;
 }
 
+winrt::Microsoft::ReactNative::ReactPropertyId<bool> UseRunOnQueueSyncProperty() noexcept {
+  winrt::Microsoft::ReactNative::ReactPropertyId<bool> propId{L"ReactNative.QuirkSettings", L"UseRunOnQueueSync"};
+
+  return propId;
+}
+
 #pragma region IDL interface
 
 /*static*/ void QuirkSettings::SetMatchAndroidAndIOSStretchBehavior(
@@ -121,6 +127,12 @@ winrt::Microsoft::ReactNative::ReactPropertyId<bool> UseRuntimeSchedulerProperty
   ReactPropertyBag(settings.Properties()).Set(UseRuntimeSchedulerProperty(), value);
 }
 
+/*static*/ void QuirkSettings::SetUseRunOnQueueSync(
+    winrt::Microsoft::ReactNative::ReactInstanceSettings settings,
+    bool value) noexcept {
+  ReactPropertyBag(settings.Properties()).Set(UseRunOnQueueSyncProperty(), value);
+}
+
 #pragma endregion IDL interface
 
 /*static*/ bool QuirkSettings::GetMatchAndroidAndIOSStretchBehavior(ReactPropertyBag properties) noexcept {
@@ -153,4 +165,8 @@ winrt::Microsoft::ReactNative::ReactPropertyId<bool> UseRuntimeSchedulerProperty
   return properties.Get(UseRuntimeSchedulerProperty()).value_or(true);
 }
 
+/*static*/ bool QuirkSettings::GetUseRunOnQueueSync(ReactPropertyBag properties) noexcept {
+  return properties.Get(UseRunOnQueueSyncProperty()).value_or(false);
+}
+
 } // namespace winrt::Microsoft::ReactNative::implementation

package/Microsoft.ReactNative/QuirkSettings.h

@@ -30,6 +30,7 @@ struct QuirkSettings : QuirkSettingsT<QuirkSettings> {
       winrt::Microsoft::ReactNative::ReactPropertyBag properties) noexcept;
   static bool GetSuppressWindowFocusOnViewFocus(winrt::Microsoft::ReactNative::ReactPropertyBag properties) noexcept;
   static bool GetUseRuntimeScheduler(winrt::Microsoft::ReactNative::ReactPropertyBag properties) noexcept;
+  static bool GetUseRunOnQueueSync(winrt::Microsoft::ReactNative::ReactPropertyBag properties) noexcept;
 
   static bool GetEnableFabric(winrt::Microsoft::ReactNative::ReactPropertyBag properties) noexcept;
 
@@ -65,6 +66,8 @@ struct QuirkSettings : QuirkSettingsT<QuirkSettings> {
       winrt::Microsoft::ReactNative::ReactInstanceSettings settings,
       bool value) noexcept;
 
+  static void SetUseRunOnQueueSync(winrt::Microsoft::ReactNative::ReactInstanceSettings settings, bool value) noexcept;
+
 #pragma endregion Public API - part of IDL interface
 };
 

package/Microsoft.ReactNative/QuirkSettings.idl

@@ -64,6 +64,11 @@ namespace Microsoft.ReactNative
         "By default `react-native-windows` will use the new RuntimeScheduler."
         "Setting this to false will revert the behavior to previous scheduling logic.")
     static void SetUseRuntimeScheduler(ReactInstanceSettings settings, Boolean value);
+
+    DOC_STRING(
+      "By default `react-native-windows` will not call sync JS call: runOnQueueSync."
+      "Setting this to true will revert the behavior to previous logic and might result in hang.")
+    static void SetUseRunOnQueueSync(ReactInstanceSettings settings, Boolean value);
   }
 
 } // namespace Microsoft.ReactNative

package/Microsoft.ReactNative/ReactHost/DebuggerNotifications.h

@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include <winrt/Microsoft.ReactNative.h>
+
+namespace Microsoft::ReactNative {
+
+struct DebuggerNotifications {
+  static winrt::Microsoft::ReactNative::IReactPropertyName ShowDebuggerPausedOverlayEventName() noexcept {
+    static winrt::Microsoft::ReactNative::IReactPropertyName propertyName{
+        winrt::Microsoft::ReactNative::ReactPropertyBagHelper::GetName(
+            winrt::Microsoft::ReactNative::ReactPropertyBagHelper::GetNamespace(L"ReactNative.Debugger"),
+            L"ShowDebuggerPausedOverlay")};
+    return propertyName;
+  }
+
+  static void OnShowDebuggerPausedOverlay(
+      winrt::Microsoft::ReactNative::IReactNotificationService const &service,
+      std::string message,
+      std::function<void()> onResume) {
+    const winrt::Microsoft::ReactNative::ReactNonAbiValue<std::tuple<std::string, std::function<void()>>> nonAbiValue{
+        std::in_place, std::tie(message, onResume)};
+    service.SendNotification(ShowDebuggerPausedOverlayEventName(), nullptr, nonAbiValue);
+  }
+
+  static void OnHideDebuggerPausedOverlay(winrt::Microsoft::ReactNative::IReactNotificationService const &service) {
+    service.SendNotification(ShowDebuggerPausedOverlayEventName(), nullptr, nullptr);
+  }
+
+  static winrt::Microsoft::ReactNative::IReactNotificationSubscription SubscribeShowDebuggerPausedOverlay(
+      winrt::Microsoft::ReactNative::IReactNotificationService const &service,
+      winrt::Microsoft::ReactNative::IReactDispatcher const &dispatcher,
+      std::function<void(std::string, std::function<void()>)> showCallback,
+      std::function<void()> hideCallback) {
+    return service.Subscribe(
+        ShowDebuggerPausedOverlayEventName(),
+        dispatcher,
+        [showCallback, hideCallback](auto &&, winrt::Microsoft::ReactNative::IReactNotificationArgs const &args) {
+          if (args.Data()) {
+            const auto [message, onResume] = args.Data()
+                                                 .as<winrt::Microsoft::ReactNative::ReactNonAbiValue<
+                                                     std::tuple<std::string, std::function<void()>>>>()
+                                                 .Value();
+            showCallback(message, onResume);
+          } else {
+            hideCallback();
+          }
+        });
+  }
+};
+
+} // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/ReactHost/React.h

@@ -33,6 +33,10 @@
 #include <Fabric/Composition/UriImageManager.h>
 #endif
 
+namespace facebook::react::jsinspector_modern {
+class HostTarget;
+} // namespace facebook::react::jsinspector_modern
+
 namespace Mso::React {
 
 // Forward declarations
@@ -216,9 +220,9 @@ struct ReactOptions {
   //! Base path of the SDX. The absolute path of the SDX can be constructed from this and the Identity.
   std::string BundleRootPath;
 
-  //! Javascript Bundles
-  //! This List includes both Platform and User Javascript Bundles
-  //! Bundles are loaded into Javascript engine in the same order
+  //! JavaScript Bundles
+  //! This List includes both Platform and User JavaScript Bundles
+  //! Bundles are loaded into JavaScript engine in the same order
   //! as they are specified in this list.
   std::vector<Mso::CntPtr<IJSBundle>> JSBundles;
 
@@ -237,7 +241,7 @@ struct ReactOptions {
   //! during development to report JavaScript errors to users
   std::shared_ptr<Mso::React::IRedBoxHandler> RedBoxHandler;
 
-  //! Flag to suggest sdx owner's preference on enabling Bytecode caching in Javascript Engine for corresponding SDX.
+  //! Flag to suggest sdx owner's preference on enabling Bytecode caching in JavaScript Engine for corresponding SDX.
   bool EnableBytecode{true};
 
   //! Flag controlling whether the JavaScript engine uses JIT compilation.
@@ -347,6 +351,9 @@ struct ReactOptions {
   //! The callback is called when IReactInstance is destroyed and must not be used anymore.
   //! It is called from the native queue.
   OnReactInstanceDestroyedCallback OnInstanceDestroyed;
+
+  //! The HostTarget instance for modern inspector integration.
+  facebook::react::jsinspector_modern::HostTarget *InspectorHostTarget;
 };
 
 //! IReactHost manages a ReactNative instance.