react-native-windows 0.74.6 → 0.74.8

package/Microsoft.ReactNative/Fabric/Composition/{CompositionRootView.cpp → ReactNativeIsland.cpp}

@@ -1,9 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 #include "pch.h"
-#include "CompositionRootView.h"
-#include "CompositionRootView.g.cpp"
+#include "ReactNativeIsland.h"
 #include "FocusNavigationRequest.g.cpp"
+#include "ReactNativeIsland.g.cpp"
+#include <RootViewSizeChangedEventArgs.g.h>
 
 #include <AutoDraw.h>
 #include <DynamicWriter.h>
@@ -48,7 +49,7 @@ constexpr float loadingTextHorizontalOffset = 48.0f;
 struct CompositionReactViewInstance
     : public winrt::implements<CompositionReactViewInstance, winrt::Microsoft::ReactNative::IReactViewInstance> {
   CompositionReactViewInstance(
-      winrt::weak_ref<winrt::Microsoft::ReactNative::implementation::CompositionRootView> &&weakRootControl) noexcept;
+      winrt::weak_ref<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland> &&weakRootControl) noexcept;
 
   void InitRootView(
       winrt::Microsoft::ReactNative::IReactContext context,
@@ -62,12 +63,12 @@ struct CompositionReactViewInstance
   Mso::Future<void> PostInUIQueue(TAction &&action) noexcept;
 
  private:
-  winrt::weak_ref<winrt::Microsoft::ReactNative::implementation::CompositionRootView> m_weakRootControl;
+  winrt::weak_ref<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland> m_weakRootControl;
   IReactDispatcher m_uiDispatcher{nullptr};
 };
 
 CompositionReactViewInstance::CompositionReactViewInstance(
-    winrt::weak_ref<winrt::Microsoft::ReactNative::implementation::CompositionRootView> &&weakRootControl) noexcept
+    winrt::weak_ref<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland> &&weakRootControl) noexcept
     : m_weakRootControl{std::move(weakRootControl)} {}
 
 void CompositionReactViewInstance::InitRootView(
@@ -124,14 +125,14 @@ inline Mso::Future<void> CompositionReactViewInstance::PostInUIQueue(TAction &&a
   return promise.AsFuture();
 }
 
-CompositionRootView::CompositionRootView() noexcept {}
+ReactNativeIsland::ReactNativeIsland() noexcept {}
 
 #ifdef USE_WINUI3
-CompositionRootView::CompositionRootView(const winrt::Microsoft::UI::Composition::Compositor &compositor) noexcept
+ReactNativeIsland::ReactNativeIsland(const winrt::Microsoft::UI::Composition::Compositor &compositor) noexcept
     : m_compositor(compositor) {}
 #endif
 
-CompositionRootView::~CompositionRootView() noexcept {
+ReactNativeIsland::~ReactNativeIsland() noexcept {
 #ifdef USE_WINUI3
   if (m_island && m_island.IsConnected()) {
     m_island.AutomationProviderRequested(m_islandAutomationProviderRequestedToken);
@@ -144,11 +145,11 @@ CompositionRootView::~CompositionRootView() noexcept {
   }
 }
 
-ReactNative::IReactViewHost CompositionRootView::ReactViewHost() noexcept {
+ReactNative::IReactViewHost ReactNativeIsland::ReactViewHost() noexcept {
   return m_reactViewHost;
 }
 
-void CompositionRootView::ReactViewHost(winrt::Microsoft::ReactNative::IReactViewHost const &value) noexcept {
+void ReactNativeIsland::ReactViewHost(winrt::Microsoft::ReactNative::IReactViewHost const &value) noexcept {
   if (m_reactViewHost == value) {
     return;
   }
@@ -165,16 +166,16 @@ void CompositionRootView::ReactViewHost(winrt::Microsoft::ReactNative::IReactVie
   }
 }
 
-winrt::Microsoft::UI::Composition::Visual CompositionRootView::RootVisual() noexcept {
+winrt::Microsoft::UI::Composition::Visual ReactNativeIsland::RootVisual() noexcept {
   return winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerVisual(
       m_rootVisual);
 }
 
-winrt::Microsoft::ReactNative::Composition::Experimental::IVisual CompositionRootView::InternalRootVisual() noexcept {
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ReactNativeIsland::InternalRootVisual() noexcept {
   return m_rootVisual;
 }
 
-void CompositionRootView::InternalRootVisual(
+void ReactNativeIsland::InternalRootVisual(
     winrt::Microsoft::ReactNative::Composition::Experimental::IVisual const &value) noexcept {
   if (m_rootVisual != value) {
     assert(!m_rootVisual);
@@ -183,21 +184,21 @@ void CompositionRootView::InternalRootVisual(
   }
 }
 
-void CompositionRootView::AddRenderedVisual(
+void ReactNativeIsland::AddRenderedVisual(
     const winrt::Microsoft::ReactNative::Composition::Experimental::IVisual &visual) noexcept {
   assert(!m_hasRenderedVisual);
   InternalRootVisual().InsertAt(visual, 0);
   m_hasRenderedVisual = true;
 }
 
-void CompositionRootView::RemoveRenderedVisual(
+void ReactNativeIsland::RemoveRenderedVisual(
     const winrt::Microsoft::ReactNative::Composition::Experimental::IVisual &visual) noexcept {
   assert(m_hasRenderedVisual);
   InternalRootVisual().Remove(visual);
   m_hasRenderedVisual = false;
 }
 
-bool CompositionRootView::TrySetFocus() noexcept {
+bool ReactNativeIsland::TrySetFocus() noexcept {
 #ifdef USE_WINUI3
   if (m_island && m_island.IsConnected()) {
     auto focusController = winrt::Microsoft::UI::Input::InputFocusController::GetForIsland(m_island);
@@ -207,23 +208,23 @@ bool CompositionRootView::TrySetFocus() noexcept {
   return false;
 }
 
-winrt::Windows::Foundation::Size CompositionRootView::Size() noexcept {
+winrt::Windows::Foundation::Size ReactNativeIsland::Size() noexcept {
   return m_size;
 }
 
-void CompositionRootView::Size(winrt::Windows::Foundation::Size value) noexcept {
+void ReactNativeIsland::Size(winrt::Windows::Foundation::Size value) noexcept {
   m_size = value;
   UpdateRootVisualSize();
 }
 
-void CompositionRootView::UpdateRootVisualSize() noexcept {
+void ReactNativeIsland::UpdateRootVisualSize() noexcept {
   if (m_rootVisual)
     m_rootVisual.Size({m_size.Width * m_scaleFactor, m_size.Height * m_scaleFactor});
 
   UpdateLoadingVisualSize();
 }
 
-void CompositionRootView::UpdateLoadingVisualSize() noexcept {
+void ReactNativeIsland::UpdateLoadingVisualSize() noexcept {
   if (m_loadingVisual) {
     auto drawingSurface = CreateLoadingVisualBrush();
     m_loadingVisual.Brush(drawingSurface);
@@ -237,11 +238,11 @@ void CompositionRootView::UpdateLoadingVisualSize() noexcept {
   }
 }
 
-float CompositionRootView::ScaleFactor() noexcept {
+float ReactNativeIsland::ScaleFactor() noexcept {
   return m_scaleFactor;
 }
 
-void CompositionRootView::ScaleFactor(float value) noexcept {
+void ReactNativeIsland::ScaleFactor(float value) noexcept {
   if (m_scaleFactor != value) {
     m_scaleFactor = value;
     // Lifted ContentIslands apply a scale that we need to reverse
@@ -253,15 +254,15 @@ void CompositionRootView::ScaleFactor(float value) noexcept {
   }
 }
 
-int64_t CompositionRootView::RootTag() const noexcept {
+int64_t ReactNativeIsland::RootTag() const noexcept {
   return m_rootTag;
 }
 
-winrt::Microsoft::ReactNative::Composition::ICustomResourceLoader CompositionRootView::Resources() noexcept {
+winrt::Microsoft::ReactNative::Composition::ICustomResourceLoader ReactNativeIsland::Resources() noexcept {
   return m_resources;
 }
 
-void CompositionRootView::Resources(
+void ReactNativeIsland::Resources(
     const winrt::Microsoft::ReactNative::Composition::ICustomResourceLoader &resources) noexcept {
   m_resources = resources;
 
@@ -270,7 +271,7 @@ void CompositionRootView::Resources(
   }
 }
 
-winrt::Microsoft::ReactNative::Composition::Theme CompositionRootView::Theme() noexcept {
+winrt::Microsoft::ReactNative::Composition::Theme ReactNativeIsland::Theme() noexcept {
   if (!m_theme) {
     assert(m_context);
     if (m_resources) {
@@ -282,7 +283,7 @@ winrt::Microsoft::ReactNative::Composition::Theme CompositionRootView::Theme() n
   return m_theme;
 }
 
-void CompositionRootView::Theme(const winrt::Microsoft::ReactNative::Composition::Theme &value) noexcept {
+void ReactNativeIsland::Theme(const winrt::Microsoft::ReactNative::Composition::Theme &value) noexcept {
   if (value == m_theme)
     return;
 
@@ -314,7 +315,7 @@ void CompositionRootView::Theme(const winrt::Microsoft::ReactNative::Composition
   }
 }
 
-winrt::IInspectable CompositionRootView::GetUiaProvider() noexcept {
+winrt::IInspectable ReactNativeIsland::GetUiaProvider() noexcept {
   if (m_uiaProvider == nullptr) {
     m_uiaProvider =
         winrt::make<winrt::Microsoft::ReactNative::implementation::CompositionRootAutomationProvider>(*this);
@@ -330,31 +331,11 @@ 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 {
+void ReactNativeIsland::SetWindow(uint64_t hwnd) noexcept {
   m_hwnd = reinterpret_cast<HWND>(hwnd);
 }
 
-int64_t CompositionRootView::SendMessage(uint32_t msg, uint64_t wParam, int64_t lParam) noexcept {
+int64_t ReactNativeIsland::SendMessage(uint32_t msg, uint64_t wParam, int64_t lParam) noexcept {
   if (m_rootTag == -1)
     return 0;
 
@@ -370,7 +351,7 @@ int64_t CompositionRootView::SendMessage(uint32_t msg, uint64_t wParam, int64_t
   return 0;
 }
 
-bool CompositionRootView::CapturePointer(
+bool ReactNativeIsland::CapturePointer(
     const winrt::Microsoft::ReactNative::Composition::Input::Pointer &pointer,
     facebook::react::Tag tag) noexcept {
   if (m_hwnd) {
@@ -379,7 +360,7 @@ bool CompositionRootView::CapturePointer(
   return m_CompositionEventHandler->CapturePointer(pointer, tag);
 }
 
-void CompositionRootView::ReleasePointerCapture(
+void ReactNativeIsland::ReleasePointerCapture(
     const winrt::Microsoft::ReactNative::Composition::Input::Pointer &pointer,
     facebook::react::Tag tag) noexcept {
   if (m_CompositionEventHandler->ReleasePointerCapture(pointer, tag)) {
@@ -391,7 +372,7 @@ void CompositionRootView::ReleasePointerCapture(
   }
 }
 
-void CompositionRootView::InitRootView(
+void ReactNativeIsland::InitRootView(
     winrt::Microsoft::ReactNative::IReactContext &&context,
     winrt::Microsoft::ReactNative::ReactViewOptions &&viewOptions) noexcept {
   m_uiDispatcher = context.Properties()
@@ -412,13 +393,13 @@ void CompositionRootView::InitRootView(
   m_isInitialized = true;
 }
 
-void CompositionRootView::UpdateRootView() noexcept {
+void ReactNativeIsland::UpdateRootView() noexcept {
   VerifyElseCrash(m_uiDispatcher.HasThreadAccess());
   VerifyElseCrash(m_isInitialized);
   UpdateRootViewInternal();
 }
 
-void CompositionRootView::UpdateRootViewInternal() noexcept {
+void ReactNativeIsland::UpdateRootViewInternal() noexcept {
   switch (m_context.Handle().LoadingState()) {
     case winrt::Microsoft::ReactNative::LoadingState::Loading:
       ShowInstanceLoading();
@@ -434,7 +415,7 @@ void CompositionRootView::UpdateRootViewInternal() noexcept {
   }
 }
 
-void CompositionRootView::UninitRootView() noexcept {
+void ReactNativeIsland::UninitRootView() noexcept {
   if (!m_isInitialized) {
     return;
   }
@@ -445,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
@@ -465,7 +446,7 @@ void CompositionRootView::UninitRootView() noexcept {
   m_isInitialized = false;
 }
 
-void CompositionRootView::ClearLoadingUI() noexcept {
+void ReactNativeIsland::ClearLoadingUI() noexcept {
   if (!m_loadingVisual)
     return;
 
@@ -475,37 +456,103 @@ void CompositionRootView::ClearLoadingUI() noexcept {
   m_loadingActivityVisual = nullptr;
 }
 
-void CompositionRootView::EnsureLoadingUI() noexcept {}
+void ReactNativeIsland::EnsureLoadingUI() noexcept {}
 
-void CompositionRootView::ShowInstanceLoaded() noexcept {
+void ReactNativeIsland::ShowInstanceLoaded() noexcept {
   if (m_rootVisual) {
     ClearLoadingUI();
 
     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;
   }
 }
 
-void CompositionRootView::ShowInstanceError() noexcept {
+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 ReactNativeIsland::SizeChanged(
+    winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::RootViewSizeChangedEventArgs> const
+        &handler) noexcept {
+  return m_sizeChangedEvent.add(handler);
+}
+
+void ReactNativeIsland::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 ReactNativeIsland::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 ReactNativeIsland::ShowInstanceError() noexcept {
   ClearLoadingUI();
 }
 
-Composition::Experimental::IDrawingSurfaceBrush CompositionRootView::CreateLoadingVisualBrush() noexcept {
+Composition::Experimental::IDrawingSurfaceBrush ReactNativeIsland::CreateLoadingVisualBrush() noexcept {
   auto compContext =
       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(
@@ -523,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();
@@ -558,7 +600,7 @@ Composition::Experimental::IDrawingSurfaceBrush CompositionRootView::CreateLoadi
   return drawingSurface;
 }
 
-void CompositionRootView::ShowInstanceLoading() noexcept {
+void ReactNativeIsland::ShowInstanceLoading() noexcept {
   if (!Mso::React::ReactOptions::UseDeveloperSupport(m_context.Properties().Handle()))
     return;
 
@@ -569,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});
 
@@ -580,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);
 }
 
-winrt::Windows::Foundation::Size CompositionRootView::Measure(
-    winrt::Windows::Foundation::Size const &availableSize) const {
-  winrt::Windows::Foundation::Size size{0.0f, 0.0f};
+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 ReactNativeIsland::Measure(
+    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(
@@ -596,65 +649,57 @@ 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 ReactNativeIsland::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
-winrt::Microsoft::UI::Content::ContentIsland CompositionRootView::Island() noexcept {
+winrt::Microsoft::UI::Content::ContentIsland ReactNativeIsland::Island() {
   if (!m_compositor) {
     return nullptr;
   }
 
   if (!m_island) {
-    auto rootVisual = m_compositor.CreateSpriteVisual();
+    winrt::Microsoft::UI::Composition::SpriteVisual rootVisual{nullptr};
+    try {
+      rootVisual = m_compositor.CreateSpriteVisual();
+    } catch (const winrt::hresult_error &e) {
+      // If the compositor has been shutdown, then we shouldn't attempt to initialize the island
+      if (e.code() == RO_E_CLOSED)
+        return nullptr;
+      throw e;
+    }
 
     InternalRootVisual(
         winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::CreateVisual(
@@ -690,7 +735,7 @@ winrt::Microsoft::UI::Content::ContentIsland CompositionRootView::Island() noexc
 #endif
 
 winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView *
-CompositionRootView::GetComponentView() noexcept {
+ReactNativeIsland::GetComponentView() noexcept {
   if (!m_context || m_context.Handle().LoadingState() != winrt::Microsoft::ReactNative::LoadingState::Loaded ||
       m_rootTag == -1)
     return nullptr;
@@ -706,7 +751,7 @@ CompositionRootView::GetComponentView() noexcept {
   return nullptr;
 }
 
-winrt::Microsoft::ReactNative::FocusNavigationResult CompositionRootView::NavigateFocus(
+winrt::Microsoft::ReactNative::FocusNavigationResult ReactNativeIsland::NavigateFocus(
     const winrt::Microsoft::ReactNative::FocusNavigationRequest &request) noexcept {
   if (auto view = GetComponentView()) {
     return winrt::make<winrt::Microsoft::ReactNative::implementation::FocusNavigationResult>(