react-native-windows 0.70.9 → 0.71.0-preview.2

package/Microsoft.ReactNative/ReactHost/ReactInstanceWin.cpp

@@ -12,6 +12,7 @@
 #include <appModel.h>
 #include <comUtil/qiCast.h>
 #ifndef CORE_ABI
+#include <LayoutService.h>
 #include <XamlUIService.h>
 #endif
 #include "ReactErrorProvider.h"
@@ -41,6 +42,7 @@
 #ifndef CORE_ABI
 #include "Modules/AccessibilityInfoModule.h"
 #include "Modules/AlertModule.h"
+#include "Modules/Animated/NativeAnimatedModule.h"
 #include "Modules/AppStateModule.h"
 #include "Modules/AppThemeModuleUwp.h"
 #include "Modules/ClipboardModule.h"
@@ -54,6 +56,7 @@
 #include "Modules/LogBoxModule.h"
 #include "Modules/NativeUIManager.h"
 #include "Modules/PaperUIManagerModule.h"
+#include "Modules/TimingModule.h"
 #endif
 #include "Modules/ReactRootViewTagGenerator.h"
 
@@ -79,13 +82,6 @@
 #include "JsiApi.h"
 #include "ReactCoreInjection.h"
 
-#ifdef USE_FABRIC
-namespace facebook::react {
-void InitTextInputThemeInfo(const Mso::React::IReactContext &reactContext);
-void InitSliderMeasurements(const Mso::React::IReactContext &reactContext);
-} // namespace facebook::react
-#endif
-
 namespace Microsoft::ReactNative {
 
 void AddStandardViewManagers(
@@ -335,6 +331,9 @@ void ReactInstanceWin::LoadModules(
   registerTurboModule(
       L"Alert", winrt::Microsoft::ReactNative::MakeTurboModuleProvider<::Microsoft::ReactNative::Alert>());
 
+  registerTurboModule(
+      L"Appearance", winrt::Microsoft::ReactNative::MakeTurboModuleProvider<::Microsoft::ReactNative::Appearance>());
+
   registerTurboModule(
       L"AppState", winrt::Microsoft::ReactNative::MakeTurboModuleProvider<::Microsoft::ReactNative::AppState>());
 
@@ -352,6 +351,10 @@ void ReactInstanceWin::LoadModules(
 
   registerTurboModule(
       L"ImageLoader", winrt::Microsoft::ReactNative::MakeTurboModuleProvider<::Microsoft::ReactNative::ImageLoader>());
+
+  registerTurboModule(
+      L"NativeAnimatedModule",
+      winrt::Microsoft::ReactNative::MakeModuleProvider<::Microsoft::ReactNative::NativeAnimatedModule>());
 #endif
 
   registerTurboModule(
@@ -365,6 +368,8 @@ void ReactInstanceWin::LoadModules(
       L"LinkingManager",
       winrt::Microsoft::ReactNative::MakeTurboModuleProvider<::Microsoft::ReactNative::LinkingManager>());
 
+  registerTurboModule(
+      L"Timing", winrt::Microsoft::ReactNative::MakeTurboModuleProvider<::Microsoft::ReactNative::Timing>());
 #endif
 }
 
@@ -390,15 +395,9 @@ void ReactInstanceWin::Initialize() noexcept {
       Microsoft::ReactNative::AppThemeHolder::InitAppThemeHolder(strongThis->GetReactContext());
       Microsoft::ReactNative::I18nManager::InitI18nInfo(
           winrt::Microsoft::ReactNative::ReactPropertyBag(strongThis->Options().Properties));
-      strongThis->m_appearanceListener = Mso::Make<Microsoft::ReactNative::AppearanceChangeListener>(
-          strongThis->GetReactContext(), *(strongThis->m_uiQueue));
+      Microsoft::ReactNative::Appearance::InitOnUIThread(strongThis->GetReactContext());
       Microsoft::ReactNative::DeviceInfoHolder::InitDeviceInfoHolder(strongThis->GetReactContext());
 
-#if USE_FABRIC
-      facebook::react::InitTextInputThemeInfo(strongThis->GetReactContext());
-      facebook::react::InitSliderMeasurements(strongThis->GetReactContext());
-#endif // USE_FABRIC
-
 #endif // CORE_ABI
 
       strongThis->Queue().Post([this, weakThis]() noexcept {
@@ -441,8 +440,8 @@ void ReactInstanceWin::Initialize() noexcept {
 #else
           // Acquire default modules and then populate with custom modules.
           // Note that some of these have custom thread affinity.
-          std::vector<facebook::react::NativeModuleDescription> cxxModules = Microsoft::ReactNative::GetCoreModules(
-              m_batchingUIThread, m_jsMessageThread.Load(), std::move(m_appearanceListener), m_reactContext);
+          std::vector<facebook::react::NativeModuleDescription> cxxModules =
+              Microsoft::ReactNative::GetCoreModules(m_batchingUIThread, m_jsMessageThread.Load(), m_reactContext);
 #endif
 
           auto nmp = std::make_shared<winrt::Microsoft::ReactNative::NativeModulesProvider>();
@@ -764,6 +763,10 @@ void ReactInstanceWin::InitUIManager() noexcept {
   m_reactContext->Properties().Set(
       implementation::XamlUIService::XamlUIServiceProperty().Handle(),
       winrt::make<implementation::XamlUIService>(m_reactContext));
+
+  m_reactContext->Properties().Set(
+      implementation::LayoutService::LayoutServiceProperty().Handle(),
+      winrt::make<implementation::LayoutService>(m_reactContext));
 }
 #endif
 
@@ -810,7 +813,10 @@ std::shared_ptr<IRedBoxHandler> ReactInstanceWin::GetRedBoxHandler() noexcept {
 #ifndef CORE_ABI
   } else if (UseDeveloperSupport()) {
     auto localWkReactHost = m_weakReactHost;
-    return CreateDefaultRedBoxHandler(std::move(localWkReactHost), *m_uiQueue);
+    return CreateDefaultRedBoxHandler(
+        winrt::Microsoft::ReactNative::ReactPropertyBag(m_reactContext->Properties()),
+        std::move(localWkReactHost),
+        *m_uiQueue);
 #endif
   } else {
     return {};
@@ -991,12 +997,9 @@ void ReactInstanceWin::AttachMeasuredRootView(
     facebook::react::IReactRootView *rootView,
     const winrt::Microsoft::ReactNative::JSValueArgWriter &initialProps,
     bool useFabric) noexcept {
-#ifndef CORE_ABI
   if (State() == ReactInstanceState::HasError)
     return;
 
-  int64_t rootTag = -1;
-
 #ifdef USE_FABRIC
   if (useFabric && !m_useWebDebugger) {
     auto uiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
@@ -1005,10 +1008,12 @@ void ReactInstanceWin::AttachMeasuredRootView(
     auto rootTag = Microsoft::ReactNative::getNextRootViewTag();
     rootView->SetTag(rootTag);
     uiManager->startSurface(rootView, rootTag, rootView->JSComponentName(), DynamicWriter::ToDynamic(initialProps));
-
-  } else
+  }
 #endif
-  {
+#ifndef CORE_ABI
+  if (!useFabric || m_useWebDebugger) {
+    int64_t rootTag = -1;
+
     if (auto uiManager = Microsoft::ReactNative::GetNativeUIManager(*m_reactContext).lock()) {
       rootTag = uiManager->AddMeasuredRootView(rootView);
       rootView->SetTag(rootTag);

package/Microsoft.ReactNative/ReactHost/ReactInstanceWin.h

@@ -181,9 +181,6 @@ class ReactInstanceWin final : public Mso::ActiveObject<IReactInstanceInternal>
   std::shared_ptr<facebook::react::MessageQueueThread> m_batchingUIThread;
 
   std::shared_ptr<IRedBoxHandler> m_redboxHandler;
-#ifndef CORE_ABI
-  Mso::CntPtr<Microsoft::ReactNative::AppearanceChangeListener> m_appearanceListener;
-#endif
   Mso::CntPtr<Mso::React::IDispatchQueue2> m_uiQueue;
   std::deque<JSCallEntry> m_jsCallQueue;
 

package/Microsoft.ReactNative/ReactNativeHost.cpp

@@ -92,7 +92,8 @@ IAsyncAction ReactNativeHost::ReloadInstance() noexcept {
 #ifndef CORE_ABI
       viewManagersProvider,
 #endif
-      turboModulesProvider);
+      turboModulesProvider,
+      m_instanceSettings.UseWebDebugger());
 
   if (auto packageProviders = InstanceSettings().PackageProviders()) {
     for (auto const &packageProvider : packageProviders) {

package/Microsoft.ReactNative/ReactPackageBuilder.cpp

@@ -15,12 +15,14 @@ ReactPackageBuilder::ReactPackageBuilder(
 #ifndef CORE_ABI
     std::shared_ptr<ViewManagersProvider> const &viewManagersProvider,
 #endif
-    std::shared_ptr<TurboModulesProvider> const &turboModulesProvider) noexcept
+    std::shared_ptr<TurboModulesProvider> const &turboModulesProvider,
+    bool isWebDebugging) noexcept
     : m_modulesProvider{modulesProvider},
 #ifndef CORE_ABI
       m_viewManagersProvider{viewManagersProvider},
 #endif
-      m_turboModulesProvider{turboModulesProvider} {
+      m_turboModulesProvider{turboModulesProvider},
+      m_isWebDebugging{isWebDebugging} {
 }
 
 void ReactPackageBuilder::AddModule(hstring const &moduleName, ReactModuleProvider const &moduleProvider) noexcept {
@@ -38,7 +40,10 @@ void ReactPackageBuilder::AddViewManager(
 void ReactPackageBuilder::AddTurboModule(
     hstring const &moduleName,
     ReactModuleProvider const &moduleProvider) noexcept {
-  m_turboModulesProvider->AddModuleProvider(moduleName, moduleProvider, true);
+  if (m_isWebDebugging)
+    m_modulesProvider->AddModuleProvider(moduleName, moduleProvider);
+  else
+    m_turboModulesProvider->AddModuleProvider(moduleName, moduleProvider, true);
 }
 
 } // namespace winrt::Microsoft::ReactNative

package/Microsoft.ReactNative/ReactPackageBuilder.h

@@ -11,14 +11,14 @@
 
 namespace winrt::Microsoft::ReactNative {
 
-struct ReactPackageBuilder
-    : winrt::implements<ReactPackageBuilder, IReactPackageBuilder, IReactPackageBuilderExperimental> {
+struct ReactPackageBuilder : winrt::implements<ReactPackageBuilder, IReactPackageBuilder> {
   ReactPackageBuilder(
       std::shared_ptr<NativeModulesProvider> const &modulesProvider,
 #ifndef CORE_ABI
       std::shared_ptr<ViewManagersProvider> const &viewManagersProvider,
 #endif
-      std::shared_ptr<TurboModulesProvider> const &turboModulesProvider) noexcept;
+      std::shared_ptr<TurboModulesProvider> const &turboModulesProvider,
+      bool isWebDebugging) noexcept;
 
  public: // IReactPackageBuilder
   void AddModule(hstring const &moduleName, ReactModuleProvider const &moduleProvider) noexcept;
@@ -33,6 +33,7 @@ struct ReactPackageBuilder
   std::shared_ptr<ViewManagersProvider> m_viewManagersProvider;
 #endif
   std::shared_ptr<TurboModulesProvider> m_turboModulesProvider;
+  const bool m_isWebDebugging;
 };
 
 } // namespace winrt::Microsoft::ReactNative

package/Microsoft.ReactNative/ReactRootView.cpp

@@ -71,22 +71,11 @@ void ReactRootView::InitialProps(ReactNative::JSValueArgWriter const &value) noe
   }
 }
 
-bool ReactRootView::ExperimentalUseFabric() const noexcept {
-  return m_useFabric;
-}
-void ReactRootView::ExperimentalUseFabric(bool value) noexcept {
-  if (m_useFabric != value) {
-    m_useFabric = value;
-    ReloadView();
-  }
-}
-
 void ReactRootView::ReloadView() noexcept {
   if (m_reactNativeHost && !m_componentName.empty()) {
     Mso::React::ReactViewOptions viewOptions{};
     viewOptions.ComponentName = to_string(m_componentName);
     viewOptions.InitialProps = m_initialPropsWriter;
-    viewOptions.UseFabric = m_useFabric;
     if (auto reactViewHost = ReactViewHost()) {
       reactViewHost->ReloadViewInstanceWithOptions(std::move(viewOptions));
     } else {
@@ -164,8 +153,7 @@ void ReactRootView::InitRootView(
   m_context = &reactInstance->GetReactContext();
   m_reactViewOptions = std::make_unique<Mso::React::ReactViewOptions>(std::move(reactViewOptions));
 
-  m_touchEventHandler = std::make_shared<::Microsoft::ReactNative::TouchEventHandler>(
-      *m_context, m_reactViewOptions->UseFabric && !reactInstance->Options().UseWebDebugger());
+  m_touchEventHandler = std::make_shared<::Microsoft::ReactNative::TouchEventHandler>(*m_context);
   m_SIPEventHandler = std::make_shared<::Microsoft::ReactNative::SIPEventHandler>(*m_context);
   m_previewKeyboardEventHandlerOnRoot =
       std::make_shared<::Microsoft::ReactNative::PreviewKeyboardEventHandlerOnRoot>(*m_context);
@@ -214,7 +202,7 @@ void ReactRootView::UninitRootView() noexcept {
 
   if (m_isJSViewAttached) {
     if (auto reactInstance = m_weakReactInstance.GetStrongPtr()) {
-      reactInstance->DetachRootView(this, m_reactViewHost->Options().UseFabric);
+      reactInstance->DetachRootView(this, false);
     }
   }
 
@@ -300,8 +288,7 @@ void ReactRootView::ShowInstanceLoaded() noexcept {
     ClearLoadingUI();
 
     if (auto reactInstance = m_weakReactInstance.GetStrongPtr()) {
-      reactInstance->AttachMeasuredRootView(
-          this, Mso::Copy(m_reactViewOptions->InitialProps), m_reactViewOptions->UseFabric);
+      reactInstance->AttachMeasuredRootView(this, Mso::Copy(m_reactViewOptions->InitialProps), false);
     }
     m_isJSViewAttached = true;
   }
@@ -455,36 +442,6 @@ Windows::Foundation::Size ReactRootView::MeasureOverride(Windows::Foundation::Si
       size.Width = desired.Width;
   }
 
-#ifdef USE_FABRIC
-  if (m_isInitialized && m_useFabric && !Mso::React::ReactOptions::UseWebDebugger(m_context->Properties()) &&
-      m_rootTag != -1) {
-    if (auto fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
-            winrt::Microsoft::ReactNative::ReactPropertyBag(m_context->Properties()))) {
-      facebook::react::LayoutContext context;
-      // TODO scaling factor
-      context.pointScaleFactor = 1; // pointScaleFactor_;
-
-      facebook::react::LayoutConstraints constraints;
-      // TODO should support MinHeight/MinWidth
-      constraints.minimumSize.height = static_cast<facebook::react::Float>(0.0f);
-      constraints.minimumSize.width = static_cast<facebook::react::Float>(0.0f);
-
-      // TODO should support MaxHeight/MaxWidth props?
-      constraints.minimumSize.height = constraints.maximumSize.height =
-          static_cast<facebook::react::Float>(availableSize.Height);
-      constraints.minimumSize.width = constraints.maximumSize.width =
-          static_cast<facebook::react::Float>(availableSize.Width);
-      constraints.layoutDirection = FlowDirection() == xaml::FlowDirection::LeftToRight
-          ? facebook::react::LayoutDirection::LeftToRight
-          : facebook::react::LayoutDirection::RightToLeft;
-
-      auto yogaSize =
-          fabricuiManager->measureSurface(static_cast<facebook::react::SurfaceId>(m_rootTag), constraints, context);
-      return {std::min(yogaSize.width, availableSize.Width), std::min(yogaSize.height, availableSize.Height)};
-    }
-  }
-#endif
-
   return size;
 }
 
@@ -492,35 +449,6 @@ Windows::Foundation::Size ReactRootView::ArrangeOverride(Windows::Foundation::Si
   for (xaml::UIElement child : Children()) {
     child.Arrange(winrt::Rect(0, 0, finalSize.Width, finalSize.Height));
   }
-
-#ifdef USE_FABRIC
-  if (m_isInitialized && m_useFabric && !Mso::React::ReactOptions::UseWebDebugger(m_context->Properties()) &&
-      m_rootTag != -1) {
-    if (auto fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
-            winrt::Microsoft::ReactNative::ReactPropertyBag(m_context->Properties()))) {
-      facebook::react::LayoutContext context;
-      // TODO scaling factor
-      context.pointScaleFactor = 1; // pointScaleFactor_;
-
-      facebook::react::LayoutConstraints constraints;
-      // TODO should support MinHeight/MinWidth
-      constraints.minimumSize.height = static_cast<facebook::react::Float>(0.0f);
-      constraints.minimumSize.width = static_cast<facebook::react::Float>(0.0f);
-
-      // TODO should support MaxHeight/MaxWidth props?
-      constraints.minimumSize.height = constraints.maximumSize.height =
-          static_cast<facebook::react::Float>(finalSize.Height);
-      constraints.minimumSize.width = constraints.maximumSize.width =
-          static_cast<facebook::react::Float>(finalSize.Width);
-      constraints.layoutDirection = FlowDirection() == xaml::FlowDirection::LeftToRight
-          ? facebook::react::LayoutDirection::LeftToRight
-          : facebook::react::LayoutDirection::RightToLeft;
-
-      fabricuiManager->constraintSurfaceLayout(
-          static_cast<facebook::react::SurfaceId>(m_rootTag), constraints, context);
-    }
-  }
-#endif
   return finalSize;
 }
 

package/Microsoft.ReactNative/ReactRootView.h

@@ -36,10 +36,6 @@ struct ReactRootView : ReactRootViewT<ReactRootView>, ::Microsoft::ReactNative::
     UpdatePerspective();
   }
 
-  // property ExperimentalUseFabric
-  bool ExperimentalUseFabric() const noexcept;
-  void ExperimentalUseFabric(bool value) noexcept;
-
   void ReloadView() noexcept;
 
   // Used by RootViewManager
@@ -76,7 +72,6 @@ struct ReactRootView : ReactRootViewT<ReactRootView>, ::Microsoft::ReactNative::
   bool m_isPerspectiveEnabled{true};
   bool m_isInitialized{false};
   bool m_isJSViewAttached{false};
-  bool m_useFabric{false};
   Mso::DispatchQueue m_uiQueue;
   int64_t m_rootTag{-1};
   std::unique_ptr<Mso::React::ReactOptions> m_reactOptions;
@@ -89,7 +84,6 @@ struct ReactRootView : ReactRootViewT<ReactRootView>, ::Microsoft::ReactNative::
   std::shared_ptr<::Microsoft::ReactNative::PreviewKeyboardEventHandlerOnRoot> m_previewKeyboardEventHandlerOnRoot;
   xaml::Controls::ContentControl m_focusSafeHarbor{nullptr};
   xaml::Controls::ContentControl::LosingFocus_revoker m_focusSafeHarborLosingFocusRevoker{};
-  xaml::FrameworkElement::SizeChanged_revoker m_rootSizeChangedRevoker{};
   winrt::Grid m_greenBoxGrid{nullptr};
   winrt::TextBlock m_waitingTextBlock{nullptr};
   winrt::SystemNavigationManager::BackRequested_revoker m_backRequestedRevoker{};

package/Microsoft.ReactNative/ReactRootView.idl

@@ -8,18 +8,10 @@ import "ReactNativeHost.idl";
 
 namespace Microsoft.ReactNative
 {
-  [experimental]
-  DOC_STRING("Experimental properties for ReactRootView")
-  interface IReactRootViewExperimental
-  {
-    DOC_STRING("Use Fabric for this ReactRootView")
-    Boolean ExperimentalUseFabric { get; set; };
-  }
-
   [default_interface]
   [webhosthidden]
   DOC_STRING("A XAML component that hosts React Native UI elements.")
-  runtimeclass ReactRootView : XAML_NAMESPACE.Controls.Grid, IReactRootViewExperimental
+  runtimeclass ReactRootView : XAML_NAMESPACE.Controls.Grid
   {
     DOC_STRING("Creates a new instance of @ReactRootView.")
     ReactRootView();

package/Microsoft.ReactNative/RedBox.cpp

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 #include "pch.h"
 #include "RedBox.h"
+#include <ReactPropertyBag.h>
 #include <boost/algorithm/string.hpp>
 #include <functional/functor.h>
 #include <regex>
@@ -14,6 +15,12 @@
 #include <winrt/Windows.Foundation.h>
 
 #ifndef CORE_ABI
+
+#ifdef USE_FABRIC
+#include <Shobjidl.h>
+#include <Utils/Helpers.h>
+#include <winrt/Windows.UI.Popups.h>
+#endif // USE_FABRIC
 #include <UI.Xaml.Controls.Primitives.h>
 #include <UI.Xaml.Controls.h>
 #include <UI.Xaml.Documents.h>
@@ -27,8 +34,8 @@
 #include <winrt/Windows.Web.Http.h>
 #include "CppWinRTIncludes.h"
 #include "Utils/Helpers.h"
+#endif // CORE_ABI
 #include "XamlUtils.h"
-#endif
 
 using namespace winrt::Windows::Foundation;
 
@@ -39,17 +46,21 @@ using IInspectable = winrt::Windows::Foundation::IInspectable;
 #ifndef CORE_ABI
 struct RedBox : public std::enable_shared_from_this<RedBox> {
   RedBox(
+      winrt::Microsoft::ReactNative::ReactPropertyBag &propBag,
       const Mso::WeakPtr<IReactHost> &weakReactHost,
       Mso::Functor<void(uint32_t)> &&onClosedCallback,
       ErrorInfo &&errorInfo) noexcept
       : m_weakReactHost(weakReactHost),
+        m_propBag(propBag),
         m_onClosedCallback(std::move(onClosedCallback)),
         m_errorInfo(std::move(errorInfo)) {}
 
   void Dismiss() noexcept {
+#ifdef USE_FABRIC
     if (m_popup) {
       m_popup.IsOpen(false);
     }
+#endif // USE_FABRIC
   }
 
   void Reload() noexcept {
@@ -67,8 +78,36 @@ struct RedBox : public std::enable_shared_from_this<RedBox> {
     }
   }
 
-  void ShowNewJSError() noexcept {
-    m_showing = true;
+#ifdef USE_FABRIC
+  void ShowNewJsErrorUsingMessageDialog() noexcept {
+    // Using MessageDialog is "easy", but it does mean we cannot update the message when symbols are resolved.
+    // Ideally we'd have a dialog we could push UI updates to. -- Maybe we could load XAML and host the XAML dialog?
+
+    std::stringstream ss;
+    ss << m_errorInfo.Message;
+    ss << std::endl << std::endl;
+    for (auto frame : m_errorInfo.Callstack) {
+      ss << frame.Method << "\n" << frame.File << ":" << frame.Line << ":" << frame.Column << std::endl;
+    }
+
+    auto msg = winrt::Windows::UI::Popups::MessageDialog(winrt::to_hstring(ss.str()), L"React Native Error");
+    auto hwnd = reinterpret_cast<HWND>(
+        *m_propBag.Get(winrt::Microsoft::ReactNative::ReactPropertyId<uint64_t>(L"RootHwndForDevUI")));
+    auto initializeWithWindow{msg.as<::IInitializeWithWindow>()};
+    initializeWithWindow->Initialize(hwnd);
+    msg.Commands().Append(
+        winrt::Windows::UI::Popups::UICommand(L"Dismiss", [](winrt::Windows::UI::Popups::IUICommand const &command){}));
+    msg.Commands().Append(winrt::Windows::UI::Popups::UICommand(
+        L"Reload", [wkHost = m_weakReactHost](winrt::Windows::UI::Popups::IUICommand const &command) {
+          if (auto reactHost = wkHost.GetStrongPtr()) {
+            reactHost->ReloadInstance();
+          }
+        }));
+    msg.ShowAsync();
+  }
+#endif USE_FABRIC
+
+  void ShowNewJSErrorUsingXaml() noexcept {
     m_popup = xaml::Controls::Primitives::Popup{};
 
     const winrt::hstring xamlString =
@@ -166,6 +205,19 @@ struct RedBox : public std::enable_shared_from_this<RedBox> {
     m_popup.IsOpen(true);
   }
 
+  void ShowNewJSError() noexcept {
+    m_showing = true;
+
+#ifdef USE_FABRIC
+    if (Microsoft::ReactNative::IsFabricEnabled(m_propBag.Handle())) {
+      ShowNewJsErrorUsingMessageDialog();
+    } else
+#endif // USE_FABRIC
+    {
+      ShowNewJSErrorUsingXaml();
+    }
+  }
+
   void UpdateError(const ErrorInfo &&info) noexcept {
     m_errorInfo = std::move(info);
     if (m_showing) {
@@ -328,6 +380,9 @@ struct RedBox : public std::enable_shared_from_this<RedBox> {
   }
 
   void PopulateFrameStackUI() noexcept {
+    if (!m_stackPanel)
+      return;
+
     m_stackPanel.Children().Clear();
     for (const auto &frame : m_errorInfo.Callstack) {
       const winrt::hstring xamlFrameString =
@@ -396,12 +451,14 @@ struct RedBox : public std::enable_shared_from_this<RedBox> {
   xaml::Controls::TextBlock m_errorMessageText{nullptr};
   xaml::Controls::TextBlock m_errorStackText{nullptr};
 
-  bool m_showing = false;
-  Mso::Functor<void(uint32_t)> m_onClosedCallback;
   xaml::FrameworkElement::SizeChanged_revoker m_sizeChangedRevoker;
   winrt::event_token m_tokenClosed;
   winrt::event_token m_tokenDismiss;
   winrt::event_token m_tokenReload;
+
+  winrt::Microsoft::ReactNative::ReactPropertyBag m_propBag;
+  bool m_showing = false;
+  Mso::Functor<void(uint32_t)> m_onClosedCallback;
   ErrorInfo m_errorInfo;
   Mso::WeakPtr<IReactHost> m_weakReactHost;
 };
@@ -411,9 +468,10 @@ struct RedBox : public std::enable_shared_from_this<RedBox> {
  */
 struct DefaultRedBoxHandler final : public std::enable_shared_from_this<DefaultRedBoxHandler>, IRedBoxHandler {
   DefaultRedBoxHandler(
+      const winrt::Microsoft::ReactNative::ReactPropertyBag &propBag,
       Mso::WeakPtr<Mso::React::IReactHost> &&weakReactHost,
       const Mso::React::IDispatchQueue2 &uiQueue) noexcept
-      : m_weakReactHost{std::move(weakReactHost)}, m_uiQueue{&uiQueue} {}
+      : m_weakReactHost{std::move(weakReactHost)}, m_uiQueue{&uiQueue}, m_propBag(propBag) {}
 
   ~DefaultRedBoxHandler() {
     // Hide any currently showing redBoxes
@@ -441,6 +499,7 @@ struct DefaultRedBoxHandler final : public std::enable_shared_from_this<DefaultR
     }
 
     std::shared_ptr<RedBox> redbox(std::make_shared<RedBox>(
+        m_propBag,
         m_weakReactHost,
         [wkthis = std::weak_ptr(shared_from_this())](uint32_t id) {
           if (auto pthis = wkthis.lock()) {
@@ -532,12 +591,13 @@ struct DefaultRedBoxHandler final : public std::enable_shared_from_this<DefaultR
 
  private:
   Mso::CntPtr<const Mso::React::IDispatchQueue2> m_uiQueue;
+  winrt::Microsoft::ReactNative::ReactPropertyBag m_propBag;
   bool m_showingRedBox{false}; // Access from UI Thread only
   std::mutex m_lockRedBox;
   std::vector<std::shared_ptr<RedBox>> m_redBoxes; // Protected by m_lockRedBox
   const Mso::WeakPtr<IReactHost> m_weakReactHost;
 };
-#endif
+#endif // CORE_ABI
 
 struct RedBoxHandler final : public Mso::React::IRedBoxHandler {
   RedBoxHandler(winrt::Microsoft::ReactNative::IRedBoxHandler const &redBoxHandler) : m_redBoxHandler(redBoxHandler) {}
@@ -578,10 +638,11 @@ std::shared_ptr<IRedBoxHandler> CreateRedBoxHandler(
 }
 
 std::shared_ptr<IRedBoxHandler> CreateDefaultRedBoxHandler(
+    const winrt::Microsoft::ReactNative::ReactPropertyBag &propBag,
     Mso::WeakPtr<IReactHost> &&weakReactHost,
     const Mso::React::IDispatchQueue2 &uiQueue) noexcept {
 #ifndef CORE_ABI
-  return std::make_shared<DefaultRedBoxHandler>(std::move(weakReactHost), uiQueue);
+  return std::make_shared<DefaultRedBoxHandler>(propBag, std::move(weakReactHost), uiQueue);
 #else
   return nullptr;
 #endif

package/Microsoft.ReactNative/RedBox.h

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 #pragma once
 #include <DevSettings.h>
+#include <ReactPropertyBag.h>
 #include "IReactDispatcher.h"
 #include "IRedBoxHandler.h"
 #include "ReactHost/React.h"
@@ -12,6 +13,7 @@ std::shared_ptr<IRedBoxHandler> CreateRedBoxHandler(
     winrt::Microsoft::ReactNative::IRedBoxHandler const &redBoxHandler) noexcept;
 
 std::shared_ptr<IRedBoxHandler> CreateDefaultRedBoxHandler(
+    const winrt::Microsoft::ReactNative::ReactPropertyBag &propBag,
     Mso::WeakPtr<IReactHost> &&weakReactHost,
     const Mso::React::IDispatchQueue2 &uiQueue) noexcept;
 } // namespace Mso::React

package/Microsoft.ReactNative/RedBoxHandler.cpp

@@ -34,7 +34,9 @@ struct DefaultRedBoxHandler : winrt::implements<DefaultRedBoxHandler, IRedBoxHan
     auto hostImpl = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeHost>(host);
     Mso::WeakPtr<Mso::React::IReactHost> wkHost(hostImpl->ReactHost());
     m_redBoxHandler = Mso::React::CreateDefaultRedBoxHandler(
-        std::move(wkHost), *ReactDispatcher::GetUIDispatchQueue2(host.InstanceSettings().Properties()));
+        ReactPropertyBag(host.InstanceSettings().Properties()),
+        std::move(wkHost),
+        *ReactDispatcher::GetUIDispatchQueue2(host.InstanceSettings().Properties()));
   }
 
   void ShowNewError(IRedBoxErrorInfo const &info, RedBoxErrorType type) noexcept {

package/Microsoft.ReactNative/Utils/Helpers.cpp

@@ -12,6 +12,10 @@
 #include <appmodel.h>
 #include <processthreadsapi.h>
 
+#ifdef USE_FABRIC
+#include <Fabric/Composition/CompositionUIService.h>
+#endif // USE_FABRIC
+
 namespace winrt {
 using namespace xaml::Controls::Primitives;
 using namespace xaml::Media;
@@ -119,4 +123,13 @@ bool IsWinUI3Island() {
 #endif
 }
 
+bool IsFabricEnabled(winrt::Microsoft::ReactNative::IReactPropertyBag const &properties) {
+#ifdef USE_FABRIC
+  return winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositionContext(
+             properties) != nullptr;
+#else
+  return false;
+#endif
+}
+
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Utils/Helpers.h

@@ -33,5 +33,6 @@ bool Is21H1OrHigher();
 
 bool IsXamlIsland();
 bool IsWinUI3Island();
+bool IsFabricEnabled(winrt::Microsoft::ReactNative::IReactPropertyBag const &properties);
 
 } // namespace Microsoft::ReactNative