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

package/Microsoft.ReactNative/Modules/AppearanceModule.h

@@ -3,51 +3,44 @@
 
 #pragma once
 
-#include <cxxreact/CxxModule.h>
-#include <eventWaitHandle/eventWaitHandle.h>
-
-#include <winrt/Windows.UI.ViewManagement.h>
-
-#include <IReactDispatcher.h>
+#include "../../codegen/NativeAppearanceSpec.g.h"
 #include <React.h>
-#include <object/refCountedObject.h>
-#include "IReactInstance.h"
+#include <winrt/Windows.UI.ViewManagement.h>
 
 namespace Microsoft::ReactNative {
 
-// Listens for the current theme on the UI thread, storing the most recent. Will emit JS events on Appearance change.
-class AppearanceChangeListener final : public Mso::RefCountedObject<Mso::RefCountStrategy::WeakRef, Mso::IRefCounted> {
+REACT_MODULE(Appearance)
+struct Appearance : std::enable_shared_from_this<Appearance> {
   using ApplicationTheme = xaml::ApplicationTheme;
   using UISettings = winrt::Windows::UI::ViewManagement::UISettings;
+  using ModuleSpec = ReactNativeSpecs::AppearanceSpec;
 
- public:
-  AppearanceChangeListener(
-      const Mso::React::IReactContext &context,
-      const Mso::React::IDispatchQueue2 &uiQueue) noexcept;
-  const char *GetColorScheme() const noexcept;
+  REACT_INIT(Initialize)
+  void Initialize(winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
 
- private:
-  static const char *ToString(ApplicationTheme theme) noexcept;
-  void OnColorValuesChanged() noexcept;
+  REACT_SYNC_METHOD(getColorScheme)
+  std::optional<std::string> getColorScheme() noexcept;
 
-  Mso::CntPtr<const Mso::React::IDispatchQueue2> m_queue;
-  UISettings m_uiSettings;
-  UISettings::ColorValuesChanged_revoker m_revoker;
-  std::atomic<ApplicationTheme> m_currentTheme;
-  Mso::CntPtr<const Mso::React::IReactContext> m_context;
-  std::weak_ptr<IReactInstance> m_weakReactInstance;
-};
+  REACT_METHOD(addListener)
+  void addListener(std::string eventName) noexcept;
 
-class AppearanceModule final : public facebook::xplat::module::CxxModule {
- public:
-  static constexpr const char *Name = "Appearance";
+  REACT_METHOD(removeListeners)
+  void removeListeners(double count) noexcept;
 
-  AppearanceModule(Mso::CntPtr<AppearanceChangeListener> &&appearanceListener) noexcept;
-  std::string getName() override;
-  std::vector<Method> getMethods() override;
+  REACT_EVENT(appearanceChanged);
+  std::function<void(std::string const &)> appearanceChanged;
+
+  // This function allows the module to get the current theme on the UI thread before it is requested by any JS thread
+  static void InitOnUIThread(const Mso::React::IReactContext &context) noexcept;
 
  private:
-  Mso::CntPtr<AppearanceChangeListener> m_changeListener;
+  static const char *ToString(ApplicationTheme theme) noexcept;
+  ApplicationTheme GetCurrentTheme() noexcept;
+  void RequeryTheme() noexcept;
+
+  winrt::Microsoft::ReactNative::ReactContext m_context;
+  UISettings m_uiSettings;
+  UISettings::ColorValuesChanged_revoker m_revoker;
 };
 
 } // namespace Microsoft::ReactNative

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,165 @@ 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();
+      winrt::Microsoft::ReactNative::ReactViewOptions viewOptions;
+      viewOptions.ComponentName(L"LogBox");
+      CompositionHwndHost.ReactViewHost(
+          winrt::Microsoft::ReactNative::ReactCoreInjection::MakeViewHost(host, viewOptions));
+      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

@@ -34,6 +34,11 @@ static YogaNodePtr make_yoga_node(YGConfigRef config) {
   return result;
 }
 
+static inline bool YogaFloatEquals(float x, float y) {
+  // Epsilon value of 0.0001f is taken from the YGFloatsEqual method in Yoga.
+  return std::fabs(x - y) < 0.0001f;
+};
+
 #if defined(_DEBUG)
 static int YogaLog(
     const YGConfigRef /*config*/,
@@ -145,6 +150,8 @@ XamlView NativeUIManager::reactPeerOrContainerFrom(xaml::FrameworkElement fe) {
 NativeUIManager::NativeUIManager(winrt::Microsoft::ReactNative::ReactContext const &reactContext)
     : m_context(reactContext) {
   m_yogaConfig = YGConfigNew();
+  if (React::implementation::QuirkSettings::GetUseWebFlexBasisBehavior(m_context.Properties()))
+    YGConfigSetExperimentalFeatureEnabled(m_yogaConfig, YGExperimentalFeatureWebFlexBasis, true);
   if (React::implementation::QuirkSettings::GetMatchAndroidAndIOSStretchBehavior(m_context.Properties()))
     YGConfigSetUseLegacyStretchBehaviour(m_yogaConfig, true);
 
@@ -202,25 +209,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;
 }
 
@@ -272,6 +260,10 @@ void NativeUIManager::ensureInBatch() {
     m_inBatch = true;
 }
 
+bool NativeUIManager::isInBatch() {
+  return m_inBatch;
+}
+
 static float NumberOrDefault(const winrt::Microsoft::ReactNative::JSValue &value, float defaultValue) {
   float result = defaultValue;
 
@@ -850,8 +842,7 @@ void NativeUIManager::ReplaceView(ShadowNode &shadowNode) {
     if (it != m_tagsToYogaNodes.end()) {
       YGNodeRef yogaNode = it->second.get();
 
-      YGMeasureFunc func = pViewManager->GetYogaCustomMeasureFunc();
-      if (func != nullptr) {
+      if (pViewManager->IsNativeControlWithSelfLayout()) {
         auto context = std::make_unique<YogaContext>(node.GetView());
         YGNodeSetContext(yogaNode, reinterpret_cast<void *>(context.get()));
 
@@ -876,26 +867,6 @@ void NativeUIManager::UpdateView(ShadowNode &shadowNode, winrt::Microsoft::React
   }
 }
 
-void NativeUIManager::UpdateExtraLayout(int64_t tag) {
-  // For nodes that are not self-measure, there may be styles applied that are
-  // applying padding. Here we make sure Yoga knows about that padding so yoga
-  // layout is aware of what rendering intends to do with it.  (net: buttons
-  // with padding shouldn't have clipped content anymore)
-  ShadowNodeBase *shadowNode = static_cast<ShadowNodeBase *>(m_host->FindShadowNodeForTag(tag));
-  if (shadowNode == nullptr)
-    return;
-
-  if (shadowNode->IsExternalLayoutDirty()) {
-    YGNodeRef yogaNode = GetYogaNode(tag);
-    if (yogaNode)
-      shadowNode->DoExtraLayoutPrep(yogaNode);
-  }
-
-  for (int64_t child : shadowNode->m_children) {
-    UpdateExtraLayout(child);
-  }
-}
-
 void NativeUIManager::DoLayout() {
   SystraceSection s("NativeUIManager::DoLayout");
 
@@ -916,51 +887,65 @@ void NativeUIManager::DoLayout() {
 
   auto &rootTags = m_host->GetAllRootTags();
   for (int64_t rootTag : rootTags) {
-    {
-      SystraceSection s("NativeUIManager::DoLayout::UpdateExtraLayout");
-      UpdateExtraLayout(rootTag);
-    }
-
     ShadowNodeBase &rootShadowNode = static_cast<ShadowNodeBase &>(m_host->GetShadowNodeForTag(rootTag));
-    if (YGNodeRef rootNode = GetYogaNode(rootTag)) {
-      auto rootElement = rootShadowNode.GetView().as<xaml::FrameworkElement>();
-
-      float actualWidth = static_cast<float>(rootElement.ActualWidth());
-      float actualHeight = static_cast<float>(rootElement.ActualHeight());
-
-      {
-        SystraceSection s("NativeUIManager::DoLayout::YGNodeCalculateLayout");
-        // We must always run layout in LTR mode, which might seem unintuitive.
-        // We will flip the root of the tree into RTL by forcing the root XAML node's FlowDirection to RightToLeft
-        // which will inherit down the XAML tree, allowing all native controls to pick it up.
-        YGNodeCalculateLayout(rootNode, actualWidth, actualHeight, YGDirectionLTR);
-      }
-    } else {
-      assert(false);
-      return;
-    }
+    const auto rootElement = rootShadowNode.GetView().as<xaml::FrameworkElement>();
+    float actualWidth = static_cast<float>(rootElement.ActualWidth());
+    float actualHeight = static_cast<float>(rootElement.ActualHeight());
+    ApplyLayout(rootTag, actualWidth, actualHeight);
+  }
+}
+
+void NativeUIManager::ApplyLayout(int64_t tag, float width, float height) {
+  if (YGNodeRef rootNode = GetYogaNode(tag)) {
+    SystraceSection s("NativeUIManager::DoLayout::YGNodeCalculateLayout");
+    // We must always run layout in LTR mode, which might seem unintuitive.
+    // We will flip the root of the tree into RTL by forcing the root XAML node's FlowDirection to RightToLeft
+    // which will inherit down the XAML tree, allowing all native controls to pick it up.
+    YGNodeCalculateLayout(rootNode, width, height, YGDirectionLTR);
+  } else {
+    assert(false);
+    return;
   }
 
   {
     SystraceSection s("NativeUIManager::DoLayout::SetLayoutProps");
-    for (auto &tagToYogaNode : m_tagsToYogaNodes) {
-      int64_t tag = tagToYogaNode.first;
-      YGNodeRef yogaNode = tagToYogaNode.second.get();
-
-      if (!YGNodeGetHasNewLayout(yogaNode))
-        continue;
-      YGNodeSetHasNewLayout(yogaNode, false);
-
-      float left = YGNodeLayoutGetLeft(yogaNode);
-      float top = YGNodeLayoutGetTop(yogaNode);
-      float width = YGNodeLayoutGetWidth(yogaNode);
-      float height = YGNodeLayoutGetHeight(yogaNode);
-
-      ShadowNodeBase &shadowNode = static_cast<ShadowNodeBase &>(m_host->GetShadowNodeForTag(tag));
-      auto view = shadowNode.GetView();
-      auto pViewManager = shadowNode.GetViewManager();
-      pViewManager->SetLayoutProps(shadowNode, view, left, top, width, height);
+    SetLayoutPropsRecursive(tag);
+  }
+}
+
+void NativeUIManager::SetLayoutPropsRecursive(int64_t tag) {
+  ShadowNodeBase &shadowNode = static_cast<ShadowNodeBase &>(m_host->GetShadowNodeForTag(tag));
+  auto *pViewManager = shadowNode.GetViewManager();
+  if (!pViewManager->IsNativeControlWithSelfLayout()) {
+    for (const auto child : shadowNode.m_children) {
+      SetLayoutPropsRecursive(child);
+    }
+  }
+
+  const auto tagToYogaNode = m_tagsToYogaNodes.find(tag);
+  if (auto yogaNode = GetYogaNode(tag)) {
+    if (!YGNodeGetHasNewLayout(yogaNode))
+      return;
+    YGNodeSetHasNewLayout(yogaNode, false);
+
+    float left = YGNodeLayoutGetLeft(yogaNode);
+    float top = YGNodeLayoutGetTop(yogaNode);
+    float width = YGNodeLayoutGetWidth(yogaNode);
+    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)));
+      }
     }
+    shadowNode.m_layout = {left, top, width, height};
   }
 }
 
@@ -1049,7 +1034,9 @@ void NativeUIManager::measureInWindow(
   ShadowNodeBase &node = static_cast<ShadowNodeBase &>(shadowNode);
 
   if (auto view = node.GetView().try_as<xaml::FrameworkElement>()) {
-    auto windowTransform = view.TransformToVisual(xaml::Window::Current().Content());
+    // When supplied with nullptr, TransformToVisual will return the position
+    // relative to the root XAML element.
+    auto windowTransform = view.TransformToVisual(nullptr);
     auto positionInWindow = windowTransform.TransformPoint({0, 0});
 
     m_context.JSDispatcher().Post(
@@ -1149,9 +1136,9 @@ void NativeUIManager::focus(int64_t reactTag) {
 // Note: It's a known issue that blur on flyout/popup would dismiss them.
 void NativeUIManager::blur(int64_t reactTag) {
   if (auto shadowNode = static_cast<ShadowNodeBase *>(m_host->FindShadowNodeForTag(reactTag))) {
-    auto view = shadowNode->GetView();
     // Only blur if current UI is focused to avoid problem described in PR #2687
-    if (view == xaml::Input::FocusManager::GetFocusedElement().try_as<xaml::DependencyObject>()) {
+    const auto xamlRoot = tryGetXamlRoot(shadowNode->m_rootTag);
+    if (shadowNode->GetView() == xaml::Input::FocusManager::GetFocusedElement(xamlRoot)) {
       if (auto reactControl = GetParentXamlReactControl(reactTag).get()) {
         reactControl.as<winrt::Microsoft::ReactNative::implementation::ReactRootView>()->blur(shadowNode->GetView());
       } else {
@@ -1168,8 +1155,8 @@ void NativeUIManager::blur(int64_t reactTag) {
 // m_tagsToXamlReactControl to get the IXamlReactControl
 winrt::weak_ref<winrt::Microsoft::ReactNative::ReactRootView> NativeUIManager::GetParentXamlReactControl(
     int64_t tag) const {
-  if (auto shadowNode = static_cast<ShadowNodeBase *>(m_host->FindParentRootShadowNode(tag))) {
-    auto it = m_tagsToXamlReactControl.find(shadowNode->m_tag);
+  if (auto shadowNode = m_host->FindShadowNodeForTag(tag)) {
+    auto it = m_tagsToXamlReactControl.find(shadowNode->m_rootTag);
     if (it != m_tagsToXamlReactControl.end()) {
       return it->second;
     }