react-native-windows 0.74.5 → 0.74.7

package/Microsoft.ReactNative/ComponentView.idl

@@ -67,6 +67,26 @@ namespace Microsoft.ReactNative
     IReactContext ReactContext { get;};
   };
 
+  [experimental]
+  [webhosthidden]
+  runtimeclass LosingFocusEventArgs : Microsoft.ReactNative.Composition.Input.RoutedEventArgs {
+    Microsoft.ReactNative.ComponentView NewFocusedComponent { get; };
+    Microsoft.ReactNative.ComponentView OldFocusedComponent { get; };
+
+    void TryCancel();
+    void TrySetNewFocusedComponent(Microsoft.ReactNative.ComponentView component);
+  };
+
+  [experimental]
+  [webhosthidden]
+  runtimeclass GettingFocusEventArgs : Microsoft.ReactNative.Composition.Input.RoutedEventArgs {
+    Microsoft.ReactNative.ComponentView NewFocusedComponent { get; };
+    Microsoft.ReactNative.ComponentView OldFocusedComponent { get; };
+
+    void TryCancel();
+    void TrySetNewFocusedComponent(Microsoft.ReactNative.ComponentView component);
+  };
+
   [experimental]
   [webhosthidden]
   unsealed runtimeclass ComponentView {
@@ -101,6 +121,12 @@ namespace Microsoft.ReactNative
     overridable void OnPointerExited(Microsoft.ReactNative.Composition.Input.PointerRoutedEventArgs args);
     overridable void OnPointerCaptureLost();
 
+    Boolean TryFocus();
+    
+    event Windows.Foundation.EventHandler<LosingFocusEventArgs> LosingFocus;
+    event Windows.Foundation.EventHandler<GettingFocusEventArgs> GettingFocus;
+    event Windows.Foundation.EventHandler<Microsoft.ReactNative.Composition.Input.RoutedEventArgs> LostFocus;
+    event Windows.Foundation.EventHandler<Microsoft.ReactNative.Composition.Input.RoutedEventArgs> GotFocus;
   };
 
 } // namespace Microsoft.ReactNative

package/Microsoft.ReactNative/CompositionComponentView.idl

@@ -48,6 +48,7 @@ namespace Microsoft.ReactNative.Composition
     ComponentView(CreateCompositionComponentViewArgs args);
 
     Microsoft.UI.Composition.Compositor Compositor { get; };
+    RootComponentView Root { get; };
     Theme Theme;
     overridable void OnThemeChanged();
     Boolean CapturePointer(Microsoft.ReactNative.Composition.Input.Pointer pointer);
@@ -88,6 +89,7 @@ namespace Microsoft.ReactNative.Composition
   [webhosthidden]
   [default_interface]
   unsealed runtimeclass RootComponentView : ViewComponentView {
+    Microsoft.ReactNative.ComponentView GetFocusedComponent();
   };
   
   [experimental]

package/Microsoft.ReactNative/CompositionRootView.idl

@@ -5,6 +5,7 @@ import "IJSValueWriter.idl";
 import "ReactCoreInjection.idl";
 import "ReactNativeHost.idl";
 import "Theme.idl";
+import "IReactViewComponentBuilder.idl";
 #include "NamespaceRedirect.h"
 #include "DocString.h"
 
@@ -61,6 +62,13 @@ namespace Microsoft.ReactNative
   }
   }
 
+  [default_interface]
+  [webhosthidden]
+  [experimental]
+  runtimeclass RootViewSizeChangedEventArgs {
+    Windows.Foundation.Size Size { get; };
+  }
+
   [default_interface]
   [webhosthidden]
   [experimental]
@@ -82,7 +90,7 @@ namespace Microsoft.ReactNative
     DOC_STRING("The RootVisual associated with the @CompositionRootView. It must be set to show any React UI elements.")
     Microsoft.UI.Composition.Visual RootVisual { get; };
 
-    Windows.Foundation.Size Size {get; set; };
+    Windows.Foundation.Size Size { get; };
 
     DOC_STRING("ScaleFactor for this windows (DPI/96)")
     Single ScaleFactor {get; set;};
@@ -90,8 +98,8 @@ namespace Microsoft.ReactNative
     DOC_STRING("Move focus to this @CompositionRootView")
     FocusNavigationResult NavigateFocus(FocusNavigationRequest request);
 
-    Windows.Foundation.Size Measure(Windows.Foundation.Size availableSize);
-    Windows.Foundation.Size Arrange(Windows.Foundation.Size availableSize);
+    Windows.Foundation.Size Measure(LayoutConstraints layoutConstraints, Windows.Foundation.Point viewportOffset);
+    void Arrange(LayoutConstraints layoutConstraints, Windows.Foundation.Point viewportOffset);
 
     Object GetUiaProvider();
 
@@ -104,6 +112,8 @@ namespace Microsoft.ReactNative
 #ifdef USE_WINUI3
     Microsoft.UI.Content.ContentIsland Island { get; };
 #endif
+
+    event Windows.Foundation.EventHandler<RootViewSizeChangedEventArgs> SizeChanged;
   }
 
 } // namespace Microsoft.ReactNative

package/Microsoft.ReactNative/Fabric/ComponentView.cpp

@@ -143,19 +143,16 @@ ComponentView::rootComponentView() noexcept {
 }
 
 void ComponentView::parent(const winrt::Microsoft::ReactNative::ComponentView &parent) noexcept {
-  if (!parent) {
-    auto root = rootComponentView();
-    winrt::Microsoft::ReactNative::ComponentView view{nullptr};
-    winrt::check_hresult(
-        QueryInterface(winrt::guid_of<winrt::Microsoft::ReactNative::ComponentView>(), winrt::put_abi(view)));
-    if (root && root->GetFocusedComponent() == view) {
-      root->SetFocusedComponent(nullptr); // TODO need move focus logic - where should focus go?
-    }
-  }
-
   if (m_parent != parent) {
+    auto oldRootView = rootComponentView();
     m_rootView = nullptr;
+    auto oldParent = m_parent;
     m_parent = parent;
+    if (!parent) {
+      if (oldRootView && oldRootView->GetFocusedComponent() == *this) {
+        oldRootView->TrySetFocusedComponent(oldParent);
+      }
+    }
     if (parent) {
       theme(winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(parent)->theme());
     }
@@ -220,9 +217,83 @@ facebook::react::Point ComponentView::getClientOffset() const noexcept {
   return {};
 }
 
-void ComponentView::onFocusLost() noexcept {}
+void ComponentView::onLostFocus(
+    const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
+  m_lostFocusEvent(*this, args);
+  if (m_parent) {
+    winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)->onLostFocus(args);
+  }
+}
+
+void ComponentView::onGotFocus(
+    const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
+  m_gotFocusEvent(*this, args);
+  if (m_parent) {
+    winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)->onGotFocus(args);
+  }
+}
+
+void ComponentView::onLosingFocus(const winrt::Microsoft::ReactNative::LosingFocusEventArgs &args) noexcept {
+  m_losingFocusEvent(*this, args);
+  if (m_parent) {
+    winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)->onLosingFocus(args);
+  }
+}
+
+void ComponentView::onGettingFocus(const winrt::Microsoft::ReactNative::GettingFocusEventArgs &args) noexcept {
+  m_gettingFocusEvent(*this, args);
+  if (m_parent) {
+    winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)->onGettingFocus(args);
+  }
+}
 
-void ComponentView::onFocusGained() noexcept {}
+winrt::event_token ComponentView::LosingFocus(
+    winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::LosingFocusEventArgs> const
+        &handler) noexcept {
+  return m_losingFocusEvent.add(handler);
+}
+
+void ComponentView::LosingFocus(winrt::event_token const &token) noexcept {
+  m_losingFocusEvent.remove(token);
+}
+
+winrt::event_token ComponentView::GettingFocus(
+    winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::GettingFocusEventArgs> const
+        &handler) noexcept {
+  return m_gettingFocusEvent.add(handler);
+}
+
+void ComponentView::GettingFocus(winrt::event_token const &token) noexcept {
+  m_gettingFocusEvent.remove(token);
+}
+
+winrt::event_token ComponentView::LostFocus(
+    winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs> const
+        &handler) noexcept {
+  return m_lostFocusEvent.add(handler);
+}
+
+void ComponentView::LostFocus(winrt::event_token const &token) noexcept {
+  m_lostFocusEvent.remove(token);
+}
+
+winrt::event_token ComponentView::GotFocus(
+    winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs> const
+        &handler) noexcept {
+  return m_gotFocusEvent.add(handler);
+}
+
+void ComponentView::GotFocus(winrt::event_token const &token) noexcept {
+  m_gotFocusEvent.remove(token);
+}
+
+bool ComponentView::TryFocus() noexcept {
+  if (auto root = rootComponentView()) {
+    return root->TrySetFocusedComponent(*get_strong());
+  }
+
+  return false;
+}
 
 void ComponentView::OnPointerEntered(
     const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {}

package/Microsoft.ReactNative/Fabric/ComponentView.h

@@ -87,8 +87,29 @@ struct ComponentView : public ComponentViewT<ComponentView> {
   virtual RECT getClientRect() const noexcept;
   // The offset from this elements parent to its children (accounts for things like scroll position)
   virtual facebook::react::Point getClientOffset() const noexcept;
-  virtual void onFocusLost() noexcept;
-  virtual void onFocusGained() noexcept;
+  virtual void onLosingFocus(const winrt::Microsoft::ReactNative::LosingFocusEventArgs &args) noexcept;
+  virtual void onGettingFocus(const winrt::Microsoft::ReactNative::GettingFocusEventArgs &args) noexcept;
+  virtual void onLostFocus(const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept;
+  virtual void onGotFocus(const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept;
+
+  winrt::event_token LosingFocus(
+      winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::LosingFocusEventArgs> const
+          &handler) noexcept;
+  void LosingFocus(winrt::event_token const &token) noexcept;
+  winrt::event_token GettingFocus(
+      winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::GettingFocusEventArgs> const
+          &handler) noexcept;
+  void GettingFocus(winrt::event_token const &token) noexcept;
+  winrt::event_token LostFocus(
+      winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs> const
+          &handler) noexcept;
+  void LostFocus(winrt::event_token const &token) noexcept;
+  winrt::event_token GotFocus(
+      winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs> const
+          &handler) noexcept;
+  void GotFocus(winrt::event_token const &token) noexcept;
+
+  bool TryFocus() noexcept;
 
   virtual bool focusable() const noexcept;
   virtual facebook::react::SharedViewEventEmitter eventEmitterAtPoint(facebook::react::Point pt) noexcept;
@@ -158,6 +179,16 @@ struct ComponentView : public ComponentViewT<ComponentView> {
   winrt::Microsoft::ReactNative::ComponentView m_parent{nullptr};
   winrt::Windows::Foundation::Collections::IVector<winrt::Microsoft::ReactNative::ComponentView> m_children{
       winrt::single_threaded_vector<winrt::Microsoft::ReactNative::ComponentView>()};
+  winrt::event<winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::LosingFocusEventArgs>>
+      m_losingFocusEvent;
+  winrt::event<winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::GettingFocusEventArgs>>
+      m_gettingFocusEvent;
+  winrt::event<
+      winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs>>
+      m_lostFocusEvent;
+  winrt::event<
+      winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs>>
+      m_gotFocusEvent;
 };
 
 // Run fn on all nodes of the component view tree starting from this one until fn returns true

package/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp

@@ -243,7 +243,7 @@ CompositionEventHandler::CompositionEventHandler(
                     : static_cast<facebook::react::Tag>(
                           winrt::get_self<winrt::Microsoft::ReactNative::implementation::CompositionRootView>(
                               strongRootView)
-                              ->GetTag()),
+                              ->RootTag()),
                 args);
         auto keyboardSource = winrt::make<CompositionInputKeyboardSource>(source);
         onKeyDown(keyboardSource, keyArgs);
@@ -266,7 +266,7 @@ CompositionEventHandler::CompositionEventHandler(
                     : static_cast<facebook::react::Tag>(
                           winrt::get_self<winrt::Microsoft::ReactNative::implementation::CompositionRootView>(
                               strongRootView)
-                              ->GetTag()),
+                              ->RootTag()),
                 args);
         auto keyboardSource = winrt::make<CompositionInputKeyboardSource>(source);
         onKeyUp(keyboardSource, keyArgs);
@@ -290,7 +290,7 @@ CompositionEventHandler::CompositionEventHandler(
                     : static_cast<facebook::react::Tag>(
                           winrt::get_self<winrt::Microsoft::ReactNative::implementation::CompositionRootView>(
                               strongRootView)
-                              ->GetTag()),
+                              ->RootTag()),
                 args);
             auto keyboardSource = winrt::make<CompositionInputKeyboardSource>(source);
             onCharacterReceived(keyboardSource, charArgs);
@@ -323,7 +323,7 @@ CompositionEventHandler::~CompositionEventHandler() {
 facebook::react::SurfaceId CompositionEventHandler::SurfaceId() const noexcept {
   if (auto strongRootView = m_wkRootView.get()) {
     return static_cast<facebook::react::SurfaceId>(
-        winrt::get_self<winrt::Microsoft::ReactNative::implementation::CompositionRootView>(strongRootView)->GetTag());
+        winrt::get_self<winrt::Microsoft::ReactNative::implementation::CompositionRootView>(strongRootView)->RootTag());
   }
   return -1;
 }
@@ -460,7 +460,7 @@ int64_t CompositionEventHandler::SendMessage(HWND hwnd, uint32_t msg, uint64_t w
                              : static_cast<facebook::react::Tag>(
                                    winrt::get_self<winrt::Microsoft::ReactNative::implementation::CompositionRootView>(
                                        strongRootView)
-                                       ->GetTag()),
+                                       ->RootTag()),
             msg,
             wParam,
             lParam);
@@ -481,7 +481,7 @@ int64_t CompositionEventHandler::SendMessage(HWND hwnd, uint32_t msg, uint64_t w
                              : static_cast<facebook::react::Tag>(
                                    winrt::get_self<winrt::Microsoft::ReactNative::implementation::CompositionRootView>(
                                        strongRootView)
-                                       ->GetTag()),
+                                       ->RootTag()),
             msg,
             wParam,
             lParam);

package/Microsoft.ReactNative/Fabric/Composition/CompositionHwndHost.cpp

@@ -101,8 +101,9 @@ void CompositionHwndHost::UpdateSize() noexcept {
           static_cast<float>(m_width / ScaleFactor()), static_cast<float>(m_height / ScaleFactor())};
       // Do not relayout when minimized
       if (!IsIconic(m_hwnd)) {
-        m_compRootView.Size(size);
-        m_compRootView.Arrange(size);
+        winrt::Microsoft::ReactNative::LayoutConstraints constraints;
+        constraints.MinimumSize = constraints.MaximumSize = size;
+        m_compRootView.Arrange(constraints, {0, 0});
       }
     }
   }

package/Microsoft.ReactNative/Fabric/Composition/CompositionRootView.cpp

@@ -4,6 +4,7 @@
 #include "CompositionRootView.h"
 #include "CompositionRootView.g.cpp"
 #include "FocusNavigationRequest.g.cpp"
+#include <RootViewSizeChangedEventArgs.g.h>
 
 #include <AutoDraw.h>
 #include <DynamicWriter.h>
@@ -132,6 +133,12 @@ CompositionRootView::CompositionRootView(const winrt::Microsoft::UI::Composition
 #endif
 
 CompositionRootView::~CompositionRootView() noexcept {
+#ifdef USE_WINUI3
+  if (m_island && m_island.IsConnected()) {
+    m_island.AutomationProviderRequested(m_islandAutomationProviderRequestedToken);
+  }
+#endif
+
   if (m_uiDispatcher) {
     assert(m_uiDispatcher.HasThreadAccess());
     UninitRootView();
@@ -193,7 +200,7 @@ void CompositionRootView::RemoveRenderedVisual(
 
 bool CompositionRootView::TrySetFocus() noexcept {
 #ifdef USE_WINUI3
-  if (m_island) {
+  if (m_island && m_island.IsConnected()) {
     auto focusController = winrt::Microsoft::UI::Input::InputFocusController::GetForIsland(m_island);
     return focusController.TrySetFocus();
   }
@@ -324,26 +331,6 @@ winrt::IInspectable CompositionRootView::GetUiaProvider() noexcept {
   return m_uiaProvider;
 }
 
-std::string CompositionRootView::JSComponentName() const noexcept {
-  return to_string(m_reactViewOptions.ComponentName());
-}
-
-int64_t CompositionRootView::GetActualHeight() const noexcept {
-  return static_cast<int64_t>(m_size.Height);
-}
-
-int64_t CompositionRootView::GetActualWidth() const noexcept {
-  return static_cast<int64_t>(m_size.Width);
-}
-
-int64_t CompositionRootView::GetTag() const noexcept {
-  return m_rootTag;
-}
-
-void CompositionRootView::SetTag(int64_t tag) noexcept {
-  m_rootTag = tag;
-}
-
 void CompositionRootView::SetWindow(uint64_t hwnd) noexcept {
   m_hwnd = reinterpret_cast<HWND>(hwnd);
 }
@@ -439,7 +426,7 @@ void CompositionRootView::UninitRootView() noexcept {
 
     auto uiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
         winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()));
-    uiManager->stopSurface(static_cast<facebook::react::SurfaceId>(GetTag()));
+    uiManager->stopSurface(static_cast<facebook::react::SurfaceId>(RootTag()));
 
     // This is needed to ensure that the unmount JS logic is completed before the the instance is shutdown during
     // instance destruction. Aligns with similar code in ReactInstanceWin::DetachRootView for paper Future: Instead this
@@ -478,19 +465,82 @@ void CompositionRootView::ShowInstanceLoaded() noexcept {
     auto uiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
         winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()));
 
-    auto rootTag = ::Microsoft::ReactNative::getNextRootViewTag();
-    SetTag(rootTag);
+    m_rootTag = ::Microsoft::ReactNative::getNextRootViewTag();
     auto initProps = DynamicWriter::ToDynamic(Mso::Copy(m_reactViewOptions.InitialProps()));
     if (initProps.isNull()) {
       initProps = folly::dynamic::object();
     }
     initProps["concurrentRoot"] = true;
-    uiManager->startSurface(*this, rootTag, JSComponentName(), initProps);
+    uiManager->startSurface(
+        *this,
+        static_cast<facebook::react::SurfaceId>(m_rootTag),
+        m_layoutConstraints,
+        to_string(m_reactViewOptions.ComponentName()),
+        initProps);
 
     m_isJSViewAttached = true;
   }
 }
 
+facebook::react::AttributedStringBox CreateLoadingAttributedString() noexcept {
+  auto attributedString = facebook::react::AttributedString{};
+  auto fragment = facebook::react::AttributedString::Fragment{};
+  fragment.string = "Loading";
+  fragment.textAttributes.fontSize = loadingBarFontSize;
+  attributedString.appendFragment(fragment);
+  return facebook::react::AttributedStringBox{attributedString};
+}
+
+facebook::react::Size MeasureLoading(const facebook::react::LayoutConstraints &layoutConstraints, float scaleFactor) {
+  auto attributedStringBox = CreateLoadingAttributedString();
+  winrt::com_ptr<::IDWriteTextLayout> textLayout;
+  facebook::react::TextLayoutManager::GetTextLayout(
+      attributedStringBox, {} /*paragraphAttributes*/, layoutConstraints, textLayout);
+
+  DWRITE_TEXT_METRICS tm;
+  textLayout->GetMetrics(&tm);
+
+  return layoutConstraints.clamp(
+      {loadingActivityHorizontalOffset * scaleFactor + tm.width, loadingBarHeight * scaleFactor});
+}
+
+winrt::event_token CompositionRootView::SizeChanged(
+    winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::RootViewSizeChangedEventArgs> const
+        &handler) noexcept {
+  return m_sizeChangedEvent.add(handler);
+}
+
+void CompositionRootView::SizeChanged(winrt::event_token const &token) noexcept {
+  m_sizeChangedEvent.remove(token);
+}
+
+struct RootViewSizeChangedEventArgs : RootViewSizeChangedEventArgsT<RootViewSizeChangedEventArgs> {
+  RootViewSizeChangedEventArgs(winrt::Windows::Foundation::Size size) : m_size(size) {}
+  winrt::Windows::Foundation::Size Size() const noexcept {
+    return m_size;
+  }
+
+ private:
+  const winrt::Windows::Foundation::Size m_size;
+};
+
+void CompositionRootView::NotifySizeChanged() noexcept {
+  auto oldSize = m_size;
+  facebook::react::Size size;
+  auto rootComponentView = GetComponentView();
+  if (rootComponentView) {
+    size = rootComponentView->layoutMetrics().frame.size;
+  } else if (m_loadingVisual) {
+    size = MeasureLoading(m_layoutConstraints, m_scaleFactor);
+  }
+
+  m_size = {size.width, size.height};
+  UpdateRootVisualSize();
+  if (oldSize != m_size) {
+    m_sizeChangedEvent(*this, winrt::make<RootViewSizeChangedEventArgs>(m_size));
+  }
+}
+
 void CompositionRootView::ShowInstanceError() noexcept {
   ClearLoadingUI();
 }
@@ -500,6 +550,9 @@ Composition::Experimental::IDrawingSurfaceBrush CompositionRootView::CreateLoadi
       winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositionContext(
           m_context.Properties().Handle());
 
+  if (m_size.Height == 0 || m_size.Width == 0)
+    return nullptr;
+
   winrt::Windows::Foundation::Size surfaceSize = {
       m_size.Width * m_scaleFactor, std::min(m_size.Height, loadingBarHeight) * m_scaleFactor};
   auto drawingSurface = compContext.CreateDrawingSurfaceBrush(
@@ -517,12 +570,7 @@ Composition::Experimental::IDrawingSurfaceBrush CompositionRootView::CreateLoadi
       constraints.maximumSize.width = std::max(0.0f, m_size.Width - loadingTextHorizontalOffset);
       constraints.maximumSize.height = std::max(0.0f, m_size.Height - loadingBarHeight);
 
-      auto attributedString = facebook::react::AttributedString{};
-      auto fragment = facebook::react::AttributedString::Fragment{};
-      fragment.string = "Loading";
-      fragment.textAttributes.fontSize = loadingBarFontSize;
-      attributedString.appendFragment(fragment);
-      auto attributedStringBox = facebook::react::AttributedStringBox{attributedString};
+      auto attributedStringBox = CreateLoadingAttributedString();
 
       auto textAttributes = facebook::react::TextAttributes{};
       textAttributes.foregroundColor = facebook::react::whiteColor();
@@ -563,10 +611,7 @@ void CompositionRootView::ShowInstanceLoading() noexcept {
       winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositionContext(
           m_context.Properties().Handle());
 
-  auto drawingSurface = CreateLoadingVisualBrush();
-
   m_loadingVisual = compContext.CreateSpriteVisual();
-  m_loadingVisual.Brush(drawingSurface);
 
   auto foregroundBrush = compContext.CreateColorBrush({255, 255, 255, 255});
 
@@ -574,14 +619,28 @@ void CompositionRootView::ShowInstanceLoading() noexcept {
   m_loadingActivityVisual.Brush(foregroundBrush);
   m_loadingVisual.InsertAt(m_loadingActivityVisual, 0);
 
+  NotifySizeChanged();
   UpdateLoadingVisualSize();
 
   InternalRootVisual().InsertAt(m_loadingVisual, m_hasRenderedVisual ? 1 : 0);
 }
 
+void ApplyConstraints(
+    const winrt::Microsoft::ReactNative::LayoutConstraints &layoutConstraintsIn,
+    facebook::react::LayoutConstraints &layoutConstraintsOut) noexcept {
+  layoutConstraintsOut.minimumSize = {layoutConstraintsIn.MinimumSize.Width, layoutConstraintsIn.MinimumSize.Height};
+  layoutConstraintsOut.maximumSize = {layoutConstraintsIn.MaximumSize.Width, layoutConstraintsIn.MaximumSize.Height};
+  layoutConstraintsOut.layoutDirection =
+      static_cast<facebook::react::LayoutDirection>(layoutConstraintsIn.LayoutDirection);
+}
+
 winrt::Windows::Foundation::Size CompositionRootView::Measure(
-    winrt::Windows::Foundation::Size const &availableSize) const {
-  winrt::Windows::Foundation::Size size{0.0f, 0.0f};
+    const winrt::Microsoft::ReactNative::LayoutConstraints &layoutConstraints,
+    const winrt::Windows::Foundation::Point &viewportOffset) const noexcept {
+  facebook::react::Size size{0, 0};
+
+  facebook::react::LayoutConstraints constraints;
+  ApplyConstraints(layoutConstraints, constraints);
 
   if (m_isInitialized && m_rootTag != -1) {
     if (auto fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
@@ -590,55 +649,39 @@ winrt::Windows::Foundation::Size CompositionRootView::Measure(
       // TODO scaling factor
       context.pointScaleFactor = static_cast<facebook::react::Float>(m_scaleFactor);
       context.fontSizeMultiplier = static_cast<facebook::react::Float>(m_scaleFactor);
+      context.viewportOffset = {viewportOffset.X, viewportOffset.Y};
 
-      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);
-      // TODO get RTL
-      constraints.layoutDirection = facebook::react::LayoutDirection::LeftToRight;
-
-      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)};
+      size = fabricuiManager->measureSurface(static_cast<facebook::react::SurfaceId>(m_rootTag), constraints, context);
     }
+  } else if (m_loadingVisual) {
+    size = MeasureLoading(constraints, m_scaleFactor);
   }
 
-  return size;
+  auto clampedSize = constraints.clamp(size);
+  return {clampedSize.width, clampedSize.height};
 }
 
-winrt::Windows::Foundation::Size CompositionRootView::Arrange(winrt::Windows::Foundation::Size finalSize) const {
+void CompositionRootView::Arrange(
+    const winrt::Microsoft::ReactNative::LayoutConstraints &layoutConstraints,
+    const winrt::Windows::Foundation::Point &viewportOffset) noexcept {
+  ApplyConstraints(layoutConstraints, m_layoutConstraints);
+
   if (m_isInitialized && m_rootTag != -1) {
     if (auto fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
             winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()))) {
       facebook::react::LayoutContext context;
       context.pointScaleFactor = static_cast<facebook::react::Float>(m_scaleFactor);
       context.fontSizeMultiplier = static_cast<facebook::react::Float>(m_scaleFactor);
-
-      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);
-      // TODO get RTL
-      constraints.layoutDirection = facebook::react::LayoutDirection::LeftToRight;
+      context.viewportOffset = {viewportOffset.X, viewportOffset.Y};
 
       fabricuiManager->constraintSurfaceLayout(
-          static_cast<facebook::react::SurfaceId>(m_rootTag), constraints, context);
+          static_cast<facebook::react::SurfaceId>(m_rootTag), m_layoutConstraints, context);
     }
+  } else if (m_loadingVisual) {
+    // TODO: Resize to align loading
+    auto s = m_layoutConstraints.clamp(MeasureLoading(m_layoutConstraints, m_scaleFactor));
+    NotifySizeChanged();
   }
-  return finalSize;
 }
 
 #ifdef USE_WINUI3
@@ -655,20 +698,29 @@ winrt::Microsoft::UI::Content::ContentIsland CompositionRootView::Island() noexc
             rootVisual));
     m_island = winrt::Microsoft::UI::Content::ContentIsland::Create(rootVisual);
 
-    m_island.AutomationProviderRequested(
-        [this](
+    // ContentIsland does not support weak_ref, so we cannot use auto_revoke for these events
+    m_islandAutomationProviderRequestedToken = m_island.AutomationProviderRequested(
+        [weakThis = get_weak()](
             winrt::Microsoft::UI::Content::ContentIsland const &,
             winrt::Microsoft::UI::Content::ContentIslandAutomationProviderRequestedEventArgs const &args) {
-          auto provider = GetUiaProvider();
-          auto pRootProvider =
-              static_cast<winrt::Microsoft::ReactNative::implementation::CompositionRootAutomationProvider *>(
-                  provider.as<IRawElementProviderSimple>().get());
-          if (pRootProvider != nullptr) {
-            pRootProvider->SetIsland(m_island);
+          if (auto pThis = weakThis.get()) {
+            auto provider = pThis->GetUiaProvider();
+            auto pRootProvider =
+                static_cast<winrt::Microsoft::ReactNative::implementation::CompositionRootAutomationProvider *>(
+                    provider.as<IRawElementProviderSimple>().get());
+            if (pRootProvider != nullptr) {
+              pRootProvider->SetIsland(pThis->m_island);
+            }
+            args.AutomationProvider(std::move(provider));
+            args.Handled(true);
           }
-          args.AutomationProvider(std::move(provider));
-          args.Handled(true);
         });
+
+    m_islandFrameworkClosedToken = m_island.FrameworkClosed([weakThis = get_weak()]() {
+      if (auto pThis = weakThis.get()) {
+        pThis->m_island = nullptr;
+      }
+    });
   }
   return m_island;
 }