react-native-windows 0.0.0-canary.554 → 0.0.0-canary.556

package/Microsoft.ReactNative/Modules/DeviceInfoModule.cpp

@@ -133,7 +133,9 @@ void DeviceInfoHolder::SetCallback(
     Mso::Functor<void(React::JSValueObject &&)> &&callback) noexcept {
   auto holder = propertyBag.Get(DeviceInfoHolderPropertyId());
 
-  (*holder)->m_notifyCallback = std::move(callback);
+  if (holder) {
+    (*holder)->m_notifyCallback = std::move(callback);
+  }
 }
 
 void DeviceInfoHolder::updateDeviceInfo() noexcept {

package/Microsoft.ReactNative/Modules/ImageViewManagerModule.cpp

@@ -13,6 +13,11 @@
 #include <UI.Xaml.Media.Imaging.h>
 #include <Views/Image/ReactImage.h>
 #include <cxxreact/JsArgumentHelpers.h>
+#ifdef USE_FABRIC
+#include <Utils/Helpers.h>
+#include <wincodec.h>
+#include "XamlUtils.h"
+#endif // USE_FABRIC
 #include <winrt/Windows.Storage.Streams.h>
 #include "Unicode.h"
 
@@ -24,11 +29,21 @@ using namespace xaml::Media::Imaging;
 
 namespace Microsoft::ReactNative {
 
+#ifdef USE_FABRIC
+winrt::com_ptr<IWICBitmapSource> wicBitmapSourceFromStream(
+    const winrt::Windows::Storage::Streams::IRandomAccessStream &results) noexcept;
+#endif // USE_FABRIC
+
 winrt::fire_and_forget GetImageSizeAsync(
     std::string uriString,
     winrt::Microsoft::ReactNative::JSValue &&headers,
     Mso::Functor<void(int32_t width, int32_t height)> successCallback,
-    Mso::Functor<void()> errorCallback) {
+    Mso::Functor<void()> errorCallback
+#ifdef USE_FABRIC
+    ,
+    bool useFabric
+#endif // USE_FABRIC
+) {
   bool succeeded{false};
 
   try {
@@ -52,15 +67,27 @@ winrt::fire_and_forget GetImageSizeAsync(
       memoryStream = co_await GetImageInlineDataAsync(source);
     }
 
-    winrt::BitmapImage bitmap;
-    if (memoryStream) {
-      co_await bitmap.SetSourceAsync(memoryStream);
-    }
-
-    if (bitmap) {
-      successCallback(bitmap.PixelWidth(), bitmap.PixelHeight());
-      succeeded = true;
+#ifdef USE_FABRIC
+    if (!useFabric) {
+#endif // USE_FABRIC
+      winrt::BitmapImage bitmap;
+      if (memoryStream) {
+        co_await bitmap.SetSourceAsync(memoryStream);
+      }
+      if (bitmap) {
+        successCallback(bitmap.PixelWidth(), bitmap.PixelHeight());
+        succeeded = true;
+      }
+#ifdef USE_FABRIC
+    } else {
+      UINT width, height;
+      auto wicBmpSource = wicBitmapSourceFromStream(memoryStream);
+      if (SUCCEEDED(wicBmpSource->GetSize(&width, &height))) {
+        successCallback(width, height);
+        succeeded = true;
+      }
     }
+#endif // USE_FABRIC
   } catch (winrt::hresult_error const &) {
   }
 
@@ -96,7 +123,12 @@ void ImageLoader::getSizeWithHeaders(
         },
         [result, context]() noexcept {
           context.JSDispatcher().Post([result = std::move(result)]() noexcept { result.Reject("Failed"); });
-        });
+        }
+#ifdef USE_FABRIC
+        ,
+        IsFabricEnabled(context.Properties().Handle())
+#endif // USE_FABRIC
+    );
   });
 }
 

package/Microsoft.ReactNative/Modules/LogBoxModule.cpp

@@ -8,11 +8,23 @@
 #include "ReactHost/ReactInstanceWin.h"
 #include "ReactNativeHost.h"
 #include "Utils/Helpers.h"
+#include "XamlUtils.h"
 
+#ifdef USE_FABRIC
+#include <Fabric/Composition/CompositionContextHelper.h>
+#include <Fabric/Composition/CompositionUIService.h>
+#include <winrt/Windows.UI.Composition.h>
+#endif
 #include <UI.Xaml.Controls.Primitives.h>
 
 namespace Microsoft::ReactNative {
 
+#ifdef USE_FABRIC
+constexpr PCWSTR c_logBoxWindowClassName = L"MS_REACTNATIVE_LOGBOX";
+constexpr auto CompHostProperty = L"CompHost";
+const int LOGBOX_DEFAULT_WIDTH = 700;
+const int LOGBOX_DEFAULT_HEIGHT = 1000;
+#endif // USE_FABRIC
 void LogBox::Show() noexcept {
   if (!Mso::React::ReactOptions::UseDeveloperSupport(m_context.Properties().Handle())) {
     return;
@@ -33,59 +45,163 @@ void LogBox::Hide() noexcept {
   });
 }
 
+#ifdef USE_FABRIC
+LRESULT CALLBACK LogBoxWndProc(HWND hwnd, UINT message, WPARAM wparam, LPARAM lparam) noexcept {
+  auto data = reinterpret_cast<::IUnknown *>(GetProp(hwnd, CompHostProperty));
+  winrt::com_ptr<winrt::IUnknown> spunk;
+  React::CompositionHwndHost host{nullptr};
+
+  if (data) {
+    winrt::check_hresult(data->QueryInterface(winrt::guid_of<React::CompositionHwndHost>(), winrt::put_abi(host)));
+    auto result = static_cast<LRESULT>(host.TranslateMessage(message, wparam, lparam));
+    if (result)
+      return result;
+  }
+
+  switch (message) {
+    case WM_NCCREATE: {
+      auto cs = reinterpret_cast<CREATESTRUCT *>(lparam);
+      auto windowData = static_cast<::IUnknown *>(cs->lpCreateParams);
+      SetProp(hwnd, CompHostProperty, reinterpret_cast<::IUnknown *>(windowData));
+      break;
+    }
+    case WM_CREATE: {
+      host.Initialize((uint64_t)hwnd);
+      break;
+    }
+    case WM_CLOSE: {
+      // Just hide the window instead of destroying it
+      ::ShowWindow(hwnd, SW_HIDE);
+      return 0;
+    }
+    case WM_DESTROY: {
+      data->Release();
+      SetProp(hwnd, CompHostProperty, nullptr);
+    }
+  }
+
+  return DefWindowProc(hwnd, message, wparam, lparam);
+}
+
+void LogBox::RegisterWndClass() noexcept {
+  static bool registered = false;
+  if (registered)
+    return;
+
+  HINSTANCE hInstance = GetModuleHandle(NULL);
+
+  WNDCLASSEXW wcex = {};
+  wcex.cbSize = sizeof(WNDCLASSEX);
+  wcex.style = CS_HREDRAW | CS_VREDRAW;
+  wcex.lpfnWndProc = &LogBoxWndProc;
+  wcex.cbClsExtra = DLGWINDOWEXTRA;
+  wcex.cbWndExtra = sizeof(winrt::impl::abi<winrt::Microsoft::ReactNative::ICompositionHwndHost>::type *);
+  wcex.hInstance = hInstance;
+  wcex.hCursor = LoadCursor(nullptr, IDC_ARROW);
+  wcex.hbrBackground = (HBRUSH)(COLOR_WINDOW + 1);
+  wcex.lpszClassName = c_logBoxWindowClassName;
+  ATOM classId = RegisterClassEx(&wcex);
+  WINRT_VERIFY(classId);
+  winrt::check_win32(!classId);
+
+  registered = true;
+}
+#endif // USE_FABRIC
+
 void LogBox::ShowOnUIThread() noexcept {
   auto host = React::implementation::ReactNativeHost::GetReactNativeHost(m_context.Properties());
   if (!host)
     return;
 
-  m_logBoxContent = React::ReactRootView();
-  m_logBoxContent.ComponentName(L"LogBox");
-  m_logBoxContent.ReactNativeHost(host);
+  if (!IsFabricEnabled(m_context.Properties().Handle())) {
+    m_logBoxContent = React::ReactRootView();
+    m_logBoxContent.ComponentName(L"LogBox");
+    m_logBoxContent.ReactNativeHost(host);
 
-  m_popup = xaml::Controls::Primitives::Popup{};
-  xaml::FrameworkElement root{nullptr};
+    m_popup = xaml::Controls::Primitives::Popup{};
+    xaml::FrameworkElement root{nullptr};
 
-  if (Is19H1OrHigher()) {
-    // XamlRoot added in 19H1 - is required to be set for XamlIsland scenarios
-    if (auto xamlRoot = React::XamlUIService::GetXamlRoot(m_context.Properties().Handle())) {
-      m_popup.XamlRoot(xamlRoot);
-      root = xamlRoot.Content().as<xaml::FrameworkElement>();
+    if (Is19H1OrHigher()) {
+      // XamlRoot added in 19H1 - is required to be set for XamlIsland scenarios
+      if (auto xamlRoot = React::XamlUIService::GetXamlRoot(m_context.Properties().Handle())) {
+        m_popup.XamlRoot(xamlRoot);
+        root = xamlRoot.Content().as<xaml::FrameworkElement>();
+      }
     }
-  }
 
-  if (!root) {
-    auto window = xaml::Window::Current();
-    root = window.Content().as<xaml::FrameworkElement>();
+    if (!root) {
+      auto window = xaml::Window::Current();
+      root = window.Content().as<xaml::FrameworkElement>();
+    }
+
+    m_logBoxContent.MaxHeight(root.ActualHeight());
+    m_logBoxContent.Height(root.ActualHeight());
+    m_logBoxContent.MaxWidth(root.ActualWidth());
+    m_logBoxContent.Width(root.ActualWidth());
+    m_logBoxContent.UpdateLayout();
+
+    m_sizeChangedRevoker = root.SizeChanged(
+        winrt::auto_revoke,
+        [wkThis = weak_from_this()](auto const & /*sender*/, xaml::SizeChangedEventArgs const &args) {
+          if (auto strongThis = wkThis.lock()) {
+            strongThis->m_logBoxContent.MaxHeight(args.NewSize().Height);
+            strongThis->m_logBoxContent.Height(args.NewSize().Height);
+            strongThis->m_logBoxContent.MaxWidth(args.NewSize().Width);
+            strongThis->m_logBoxContent.Width(args.NewSize().Width);
+          }
+        });
+
+    m_tokenClosed = m_popup.Closed(
+        [wkThis = weak_from_this()](auto const & /*sender*/, winrt::IInspectable const & /*args*/) noexcept {
+          if (auto strongThis = wkThis.lock()) {
+            strongThis->HideOnUIThread();
+          }
+        });
+
+    m_popup.Child(m_logBoxContent);
+    m_popup.IsOpen(true);
   }
+#ifdef USE_FABRIC
+  else {
+    RegisterWndClass();
+
+    if (!m_hwnd) {
+      auto CompositionHwndHost = React::CompositionHwndHost();
+      CompositionHwndHost.ComponentName(L"LogBox");
+      CompositionHwndHost.ReactNativeHost(host);
+      HINSTANCE hInstance = GetModuleHandle(NULL);
+      winrt::impl::abi<winrt::Microsoft::ReactNative::ICompositionHwndHost>::type *pHost{nullptr};
+      winrt::com_ptr<::IUnknown> spunk;
+      CompositionHwndHost.as(spunk);
+      spunk->AddRef(); // Will be stored in windowData
+
+      m_hwnd = CreateWindow(
+          c_logBoxWindowClassName,
+          L"React-Native LogBox",
+          WS_OVERLAPPEDWINDOW,
+          CW_USEDEFAULT,
+          CW_USEDEFAULT,
+          LOGBOX_DEFAULT_WIDTH,
+          LOGBOX_DEFAULT_HEIGHT,
+          nullptr,
+          nullptr,
+          hInstance,
+          spunk.get());
+    }
 
-  m_logBoxContent.MaxHeight(root.ActualHeight());
-  m_logBoxContent.Height(root.ActualHeight());
-  m_logBoxContent.MaxWidth(root.ActualWidth());
-  m_logBoxContent.Width(root.ActualWidth());
-  m_logBoxContent.UpdateLayout();
-
-  m_sizeChangedRevoker = root.SizeChanged(
-      winrt::auto_revoke, [wkThis = weak_from_this()](auto const & /*sender*/, xaml::SizeChangedEventArgs const &args) {
-        if (auto strongThis = wkThis.lock()) {
-          strongThis->m_logBoxContent.MaxHeight(args.NewSize().Height);
-          strongThis->m_logBoxContent.Height(args.NewSize().Height);
-          strongThis->m_logBoxContent.MaxWidth(args.NewSize().Width);
-          strongThis->m_logBoxContent.Width(args.NewSize().Width);
-        }
-      });
-
-  m_tokenClosed = m_popup.Closed(
-      [wkThis = weak_from_this()](auto const & /*sender*/, winrt::IInspectable const & /*args*/) noexcept {
-        if (auto strongThis = wkThis.lock()) {
-          strongThis->HideOnUIThread();
-        }
-      });
-
-  m_popup.Child(m_logBoxContent);
-  m_popup.IsOpen(true);
+    ShowWindow(m_hwnd, SW_NORMAL);
+    BringWindowToTop(m_hwnd);
+    SetFocus(m_hwnd);
+  }
+#endif // USE_FABRIC
 }
 
 void LogBox::HideOnUIThread() noexcept {
+#ifdef USE_FABRIC
+  if (m_hwnd) {
+    ::ShowWindow(m_hwnd, SW_HIDE);
+  }
+#endif // USE_FABRIC
   if (m_popup) {
     m_popup.Closed(m_tokenClosed);
     m_sizeChangedRevoker.revoke();

package/Microsoft.ReactNative/Modules/LogBoxModule.h

@@ -21,10 +21,16 @@ struct LogBox : public std::enable_shared_from_this<LogBox> {
   REACT_METHOD(Hide, L"hide") void Hide() noexcept;
 
  private:
+#ifdef USE_FABRIC
+  static void RegisterWndClass() noexcept;
+#endif // USE_FABRIC
   void ShowOnUIThread() noexcept;
   void HideOnUIThread() noexcept;
 
   React::ReactContext m_context;
+#ifdef USE_FABRIC
+  HWND m_hwnd{nullptr};
+#endif // USE_FABRIC
   xaml::Controls::Primitives::Popup m_popup{nullptr};
   React::ReactRootView m_logBoxContent{nullptr};
   xaml::FrameworkElement::SizeChanged_revoker m_sizeChangedRevoker;

package/Microsoft.ReactNative/Modules/NativeUIManager.cpp

@@ -202,25 +202,6 @@ int64_t NativeUIManager::AddMeasuredRootView(facebook::react::IReactRootView *ro
 
   m_host->RegisterRootView(rootView, tag, width, height);
 
-  // TODO: call UpdateRootNodeSize when ReactRootView size changes
-  /*var resizeCount = 0;
-  rootView.SetOnSizeChangedListener((sender, args) =>
-  {
-  var currentCount = ++resizeCount;
-  var newWidth = args.NewSize.Width;
-  var newHeight = args.NewSize.Height;
-
-  Context.RunOnNativeModulesQueueThread(() =>
-  {
-  if (currentCount == resizeCount)
-  {
-  Context.AssertOnNativeModulesQueueThread();
-  _uiImplementation.UpdateRootNodeSize(tag, newWidth, newHeight,
-  _eventDispatcher);
-  }
-  });
-  });*/
-
   return tag;
 }
 

package/Microsoft.ReactNative/ReactHost/ReactInstanceWin.cpp

@@ -798,7 +798,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 {};
@@ -979,12 +982,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(
@@ -993,10 +993,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/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,9 +123,10 @@ bool IsWinUI3Island() {
 #endif
 }
 
-bool IsFabricEnabled(winrt::Microsoft::ReactNative::IReactPropertyBag const & /*properties*/) {
+bool IsFabricEnabled(winrt::Microsoft::ReactNative::IReactPropertyBag const &properties) {
 #ifdef USE_FABRIC
-  return false; // Once we add an instance property to control switching to fabric, this will check that.
+  return winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositionContext(
+             properties) != nullptr;
 #else
   return false;
 #endif

package/Microsoft.ReactNative/Views/ViewManagerBase.cpp

@@ -165,6 +165,24 @@ void ViewManagerBase::GetExportedCustomBubblingEventTypeConstants(
       // Keyboard events
       L"KeyUp",
       L"KeyDown",
+
+      // Pointer events
+      L"PointerCancel",
+      L"PointerCancelCapture",
+      L"PointerDown",
+      L"PointerDownCapture",
+      L"PointerEnter",
+      L"PointerEnterCapture",
+      L"PointerLeave",
+      L"PointerLeaveCapture",
+      L"PointerMove",
+      L"PointerMoveCapture",
+      L"PointerUp",
+      L"PointerUpCapture",
+      L"PointerOut",
+      L"PointerOutCapture",
+      L"PointerOver",
+      L"PointerOverCapture",
   };
 
   folly::dynamic bubblingEvents = folly::dynamic::object();

package/PropertySheets/Generated/PackageVersion.g.props

@@ -10,7 +10,7 @@
 -->
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <PropertyGroup>
-    <ReactNativeWindowsVersion>0.0.0-canary.554</ReactNativeWindowsVersion>
+    <ReactNativeWindowsVersion>0.0.0-canary.556</ReactNativeWindowsVersion>
     <ReactNativeWindowsMajor>0</ReactNativeWindowsMajor>
     <ReactNativeWindowsMinor>0</ReactNativeWindowsMinor>
     <ReactNativeWindowsPatch>0</ReactNativeWindowsPatch>

package/Scripts/OfficeReact.Win32.nuspec

@@ -44,6 +44,7 @@
     <file src="$nugetroot$\inc\stubs\**\*.*" target="inc" />
 
     <file src="$nugetroot$\inc\Shared\AbiSafe.h" target="inc"/>
+    <file src="$nugetroot$\inc\Shared\Composition\CompositionSwitcher.interop.h" target="inc"/>
     <file src="$nugetroot$\inc\Shared\DevSettings.h" target="inc"/>
     <file src="$nugetroot$\inc\ReactWin32\INativeUIManagerLegacy.h" target="inc"/>
     <file src="$nugetroot$\inc\Shared\InstanceManager.h" target="inc"/>

package/Shared/Shared.vcxitems.filters

@@ -127,9 +127,6 @@
     <ClCompile Include="$(MSBuildThisFileDirectory)HermesShim.cpp">
       <Filter>Source Files</Filter>
     </ClCompile>
-    <ClCompile Include="$(MSBuildThisFileDirectory)Modules\BlobModule.cpp">
-      <Filter>Source Files\Modules</Filter>
-    </ClCompile>
     <ClCompile Include="$(MSBuildThisFileDirectory)Modules\HttpModule.cpp">
       <Filter>Source Files\Modules</Filter>
     </ClCompile>
@@ -400,15 +397,6 @@
     <ClInclude Include="$(MSBuildThisFileDirectory)HermesShim.h">
       <Filter>Header Files</Filter>
     </ClInclude>
-    <ClInclude Include="$(MSBuildThisFileDirectory)Modules\IWebSocketModuleContentHandler.h">
-      <Filter>Header Files\Modules</Filter>
-    </ClInclude>
-    <ClInclude Include="$(MSBuildThisFileDirectory)Modules\BlobModule.h">
-      <Filter>Header Files\Modules</Filter>
-    </ClInclude>
-    <ClInclude Include="$(MSBuildThisFileDirectory)Modules\IWebSocketModuleProxy.h">
-      <Filter>Header Files\Modules</Filter>
-    </ClInclude>
     <ClInclude Include="$(MSBuildThisFileDirectory)Modules\HttpModule.h">
       <Filter>Header Files\Modules</Filter>
     </ClInclude>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-windows",
-  "version": "0.0.0-canary.554",
+  "version": "0.0.0-canary.556",
   "license": "MIT",
   "repository": {
     "type": "git",