react-native-windows 0.77.7 → 0.77.9

package/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.h

@@ -3,69 +3,11 @@
 
 #pragma once
 
-#include <Fabric/ComponentView.h>
-#include <Microsoft.ReactNative.Cxx/ReactContext.h>
-
-#include "Composition.WindowsModalHostComponentView.g.h"
-#include "../CompositionViewComponentView.h"
-
-#include <Fabric/Composition/RootComponentView.h>
-#include <react/components/rnwcore/ShadowNodes.h>
+#include <winrt/Microsoft.ReactNative.h>
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
-struct WindowsModalHostComponentView
-    : WindowsModalHostComponentViewT<WindowsModalHostComponentView, RootComponentView> {
-  using Super = WindowsModalHostComponentViewT<WindowsModalHostComponentView, RootComponentView>;
-
-  ~WindowsModalHostComponentView();
-
-  [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
-      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
-      facebook::react::Tag tag,
-      winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
-
-  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual VisualToMountChildrenInto() noexcept override;
-  void MountChildComponentView(
-      const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
-      uint32_t index) noexcept override;
-  void UnmountChildComponentView(
-      const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
-      uint32_t index) noexcept override;
-
-  void AdjustWindowSize() noexcept;
-
-  void updateLayoutMetrics(
-      facebook::react::LayoutMetrics const &layoutMetrics,
-      facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
-
-  void updateProps(facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept
-      override;
-  static facebook::react::SharedViewProps defaultProps() noexcept;
-  const facebook::react::ModalHostViewProps &modalHostViewProps() const noexcept;
-  bool focusable() const noexcept override;
-  facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt, bool ignorePointerEvents)
-      const noexcept override;
-  virtual std::string DefaultControlType() const noexcept;
-
-  WindowsModalHostComponentView(
-      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
-      facebook::react::Tag tag,
-      winrt::Microsoft::ReactNative::ReactContext const &reactContext);
-
-  // Used for creating new window
-  void ShowOnUIThread();
-  void HideOnUIThread() noexcept;
-  void EnsureModalCreated();
-  static void RegisterWndClass() noexcept;
-
- private:
-  HWND m_parentHwnd{nullptr};
-  HWND m_hwnd{nullptr};
-  uint64_t m_prevWindowID;
-  bool m_isVisible{false};
-  bool m_showTitleBar{false};
-  winrt::Microsoft::ReactNative::ReactNativeIsland m_reactNativeIsland;
-};
+void RegisterWindowsModalHostNativeComponent(
+    winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept;
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -0,0 +1,78 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "PortalComponentView.h"
+
+#include "Composition.PortalComponentView.g.cpp"
+
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
+
+PortalComponentView::PortalComponentView(
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext,
+    winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder *builder)
+    : base_type(tag, reactContext, builder) {
+  m_rootComponentView = winrt::make_self<winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView>(
+      compContext, *this, reactContext);
+}
+
+PortalComponentView::~PortalComponentView() {}
+
+winrt::Microsoft::ReactNative::Composition::RootComponentView PortalComponentView::ContentRoot() const noexcept {
+  return *m_rootComponentView;
+}
+
+void PortalComponentView::MountChildComponentView(
+    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
+    uint32_t index) noexcept {
+  m_rootComponentView->MountChildComponentView(childComponentView, index);
+  if (m_builder && m_builder->MountChildComponentViewHandler()) {
+    m_builder->MountChildComponentViewHandler()(
+        *this,
+        winrt::make<winrt::Microsoft::ReactNative::implementation::MountChildComponentViewArgs>(
+            childComponentView, index));
+  }
+}
+
+void PortalComponentView::UnmountChildComponentView(
+    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
+    uint32_t index) noexcept {
+  if (m_builder && m_builder->UnmountChildComponentViewHandler()) {
+    m_builder->UnmountChildComponentViewHandler()(
+        *this,
+        winrt::make<winrt::Microsoft::ReactNative::implementation::UnmountChildComponentViewArgs>(
+            childComponentView, index));
+  }
+  m_rootComponentView->UnmountChildComponentView(childComponentView, index);
+}
+
+const winrt::Microsoft::ReactNative::IComponentProps PortalComponentView::userProps(
+    facebook::react::Props::Shared const &props) noexcept {
+  const auto &abiViewProps = *std::static_pointer_cast<const ::Microsoft::ReactNative::AbiViewProps>(props);
+  return abiViewProps.UserProps();
+}
+
+void PortalComponentView::updateProps(
+    facebook::react::Props::Shared const &props,
+    facebook::react::Props::Shared const &oldProps) noexcept {
+  m_rootComponentView->updateProps(props, oldProps);
+  base_type::updateProps(props, oldProps);
+}
+
+void PortalComponentView::updateLayoutMetrics(
+    facebook::react::LayoutMetrics const &layoutMetrics,
+    facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
+  m_rootComponentView->updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
+  base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
+}
+
+void PortalComponentView::FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept {
+  m_rootComponentView->FinalizeUpdates(updateMask);
+  base_type::FinalizeUpdates(updateMask);
+}
+
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation

package/Microsoft.ReactNative/Fabric/Composition/PortalComponentView.h

@@ -0,0 +1,52 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include <Fabric/ComponentView.h>
+#include <Microsoft.ReactNative.Cxx/ReactContext.h>
+#include "RootComponentView.h"
+
+#include "Composition.PortalComponentView.g.h"
+
+namespace Microsoft::ReactNative {
+struct CompContext;
+} // namespace Microsoft::ReactNative
+
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
+
+struct PortalComponentView
+    : public PortalComponentViewT<PortalComponentView, winrt::Microsoft::ReactNative::implementation::ComponentView> {
+  PortalComponentView(
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
+      facebook::react::Tag tag,
+      winrt::Microsoft::ReactNative::ReactContext const &reactContext,
+      winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder *builder);
+  virtual ~PortalComponentView();
+
+  winrt::Microsoft::ReactNative::Composition::RootComponentView ContentRoot() const noexcept;
+
+  void MountChildComponentView(
+      const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
+      uint32_t index) noexcept override;
+  void UnmountChildComponentView(
+      const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
+      uint32_t index) noexcept override;
+
+  const winrt::Microsoft::ReactNative::IComponentProps userProps(
+      facebook::react::Props::Shared const &props) noexcept override;
+  void updateProps(facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept
+      override;
+
+  void updateLayoutMetrics(
+      facebook::react::LayoutMetrics const &layoutMetrics,
+      facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
+
+  void FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept override;
+
+ private:
+  winrt::com_ptr<winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView> m_rootComponentView;
+};
+
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -3,8 +3,10 @@
 
 #include "pch.h"
 #include "ReactCompositionViewComponentBuilder.h"
+#include <Fabric/AbiViewComponentDescriptor.h>
 #include <Fabric/Composition/CompositionViewComponentView.h>
 #include <Fabric/Composition/ContentIslandComponentView.h>
+#include <Fabric/Composition/PortalComponentView.h>
 #include <strsafe.h>
 #include "CompositionContextHelper.h"
 #include "DynamicWriter.h"
@@ -111,6 +113,26 @@ void ReactCompositionViewComponentBuilder::SetContentIslandComponentViewInitiali
   };
 }
 
+void ReactCompositionViewComponentBuilder::SetPortalComponentViewInitializer(
+    const PortalComponentViewInitializer &initializer) noexcept {
+  m_fnCreateView = [initializer](
+                       const IReactContext &reactContext,
+                       int32_t tag,
+                       const Experimental::ICompositionContext &context,
+                       ComponentViewFeatures /*features*/,
+                       ReactCompositionViewComponentBuilder &builder)
+      -> winrt::Microsoft::ReactNative::Composition::PortalComponentView {
+    auto view = winrt::make<winrt::Microsoft::ReactNative::Composition::implementation::PortalComponentView>(
+        context, tag, reactContext, &builder);
+    initializer(view);
+    return view;
+  };
+  m_descriptorConstructorFactory = []() {
+    return &facebook::react::concreteComponentDescriptorConstructor<
+        ::Microsoft::ReactNative::AbiPortalComponentDescriptor>;
+  };
+}
+
 // (Object handle, Microsoft.ReactNative.IComponentState state) => void
 // void ReactCompositionViewComponentBuilder::SetStateUpdater(StateUpdater impl) noexcept {
 //  m_stateUpdater = impl;

package/Microsoft.ReactNative/Fabric/Composition/ReactCompositionViewComponentBuilder.h

@@ -3,7 +3,6 @@
 // Licensed under the MIT License.
 
 #include <Fabric/AbiComponentDescriptor.h>
-#include <Fabric/AbiViewComponentDescriptor.h>
 #include <react/renderer/componentregistry/ComponentDescriptorProvider.h>
 #include <react/renderer/core/ReactPrimitives.h>
 #include "winrt/Microsoft.ReactNative.Composition.Experimental.h"
@@ -12,10 +11,12 @@
 
 namespace winrt::Microsoft::ReactNative::Composition {
 
-struct ReactCompositionViewComponentBuilder : winrt::implements<
-                                                  ReactCompositionViewComponentBuilder,
-                                                  IReactViewComponentBuilder,
-                                                  Composition::IReactCompositionViewComponentBuilder> {
+struct ReactCompositionViewComponentBuilder
+    : winrt::implements<
+          ReactCompositionViewComponentBuilder,
+          IReactViewComponentBuilder,
+          Composition::IReactCompositionViewComponentBuilder,
+          Composition::Experimental::IReactCompositionViewComponentInternalBuilder> {
   ReactCompositionViewComponentBuilder() noexcept;
 
  public: // IReactViewComponentBuilder
@@ -42,6 +43,7 @@ struct ReactCompositionViewComponentBuilder : winrt::implements<
  public: // Composition::IReactCompositionViewComponentBuilder
   void SetViewComponentViewInitializer(const ViewComponentViewInitializer &initializer) noexcept;
   void SetContentIslandComponentViewInitializer(const ComponentIslandComponentViewInitializer &initializer) noexcept;
+  void SetPortalComponentViewInitializer(const PortalComponentViewInitializer &initializer) noexcept;
   void SetCreateVisualHandler(CreateVisualDelegate impl) noexcept;
   void SetViewFeatures(ComponentViewFeatures viewFeatures) noexcept;
   void SetVisualToMountChildrenIntoHandler(VisualToMountChildrenIntoDelegate impl) noexcept;

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

@@ -127,21 +127,39 @@ ReactNativeIsland::ReactNativeIsland(const winrt::Microsoft::UI::Composition::Co
   InitTextScaleMultiplier();
 }
 
-// Constructor to initialize ReactNativeIsland with context and componentView
 ReactNativeIsland::ReactNativeIsland(
-    const winrt::Microsoft::UI::Composition::Compositor &compositor,
-    winrt::Microsoft::ReactNative::IReactContext context,
-    winrt::Microsoft::ReactNative::ComponentView componentView) noexcept
-    : m_compositor(compositor),
-      m_context(context),
+    const winrt::Microsoft::ReactNative::Composition::PortalComponentView &portal) noexcept
+    : m_compositor(portal.ContentRoot().Compositor()),
+      m_context(portal.ReactContext()),
       m_layoutConstraints({{0, 0}, {0, 0}, winrt::Microsoft::ReactNative::LayoutDirection::Undefined}),
       m_isFragment(true) {
-  m_rootTag = componentView.Tag();
+  m_portal = winrt::make_weak(portal);
+
+  auto trueRoot =
+      winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::PortalComponentView>(portal)
+          ->rootComponentView();
+  while (auto p = trueRoot->Portal()) {
+    trueRoot = winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::PortalComponentView>(p)
+                   ->rootComponentView();
+  };
+  m_rootTag = trueRoot->Tag();
+
   InitTextScaleMultiplier();
-  AddFragmentCompositionEventHandler(context, componentView);
+  AddFragmentCompositionEventHandler(m_context.Handle(), portal.ContentRoot());
+  auto selfPortal = winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView>(
+      portal.ContentRoot());
+  selfPortal->ReactNativeIsland(*this);
+  NotifySizeChanged();
+  selfPortal->start(*this);
+}
+
+winrt::Microsoft::ReactNative::ReactNativeIsland ReactNativeIsland::CreatePortal(
+    const winrt::Microsoft::ReactNative::Composition::PortalComponentView &portal) noexcept {
+  return winrt::make<ReactNativeIsland>(portal);
 }
 
-ReactNativeIsland::ReactNativeIsland() noexcept : ReactNativeIsland(nullptr) {}
+ReactNativeIsland::ReactNativeIsland() noexcept
+    : ReactNativeIsland(winrt::Microsoft::UI::Composition::Compositor{nullptr}) {}
 
 ReactNativeIsland::~ReactNativeIsland() noexcept {
 #ifdef USE_WINUI3
@@ -159,14 +177,20 @@ ReactNativeIsland::~ReactNativeIsland() noexcept {
     assert(m_uiDispatcher.HasThreadAccess());
     UninitRootView();
   }
+
+  if (m_island) {
+    m_island.Close();
+  }
 }
 
 ReactNative::IReactViewHost ReactNativeIsland::ReactViewHost() noexcept {
   return m_reactViewHost;
 }
 
-void ReactNativeIsland::ReactViewHost(winrt::Microsoft::ReactNative::IReactViewHost const &value) noexcept {
-  assert(!m_isFragment); // make sure this isn't a FragmentIsalnd
+void ReactNativeIsland::ReactViewHost(winrt::Microsoft::ReactNative::IReactViewHost const &value) {
+  if (m_isFragment)
+    winrt::throw_hresult(E_ACCESSDENIED);
+
   if (m_reactViewHost == value) {
     return;
   }
@@ -217,6 +241,8 @@ void ReactNativeIsland::AddRenderedVisual(
 
 void ReactNativeIsland::RemoveRenderedVisual(
     const winrt::Microsoft::ReactNative::Composition::Experimental::IVisual &visual) noexcept {
+  if (m_isFragment)
+    return;
   assert(m_hasRenderedVisual);
   InternalRootVisual().Remove(visual);
   m_hasRenderedVisual = false;
@@ -442,7 +468,7 @@ void ReactNativeIsland::InitRootView(
 
   m_context = winrt::Microsoft::ReactNative::ReactContext(std::move(context));
   m_reactViewOptions = std::move(viewOptions);
-  m_CompositionEventHandler = std::make_shared<::Microsoft::ReactNative::CompositionEventHandler>(m_context, *this, -1);
+  m_CompositionEventHandler = std::make_shared<::Microsoft::ReactNative::CompositionEventHandler>(m_context, *this);
   m_CompositionEventHandler->Initialize();
 
   UpdateRootViewInternal();
@@ -457,15 +483,13 @@ void ReactNativeIsland::AddFragmentCompositionEventHandler(
                        .Get(winrt::Microsoft::ReactNative::ReactDispatcherHelper::UIDispatcherProperty())
                        .try_as<IReactDispatcher>();
   VerifyElseCrash(m_uiDispatcher.HasThreadAccess());
-  VerifyElseCrash(m_rootTag != -1);
   auto uiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
       winrt::Microsoft::ReactNative::ReactPropertyBag(context.Properties()));
 
   if (!m_CompositionEventHandler) {
     // Create CompositionEventHandler if not already created
     m_context = winrt::Microsoft::ReactNative::ReactContext(context);
-    m_CompositionEventHandler =
-        std::make_shared<::Microsoft::ReactNative::CompositionEventHandler>(m_context, *this, componentView.Tag());
+    m_CompositionEventHandler = std::make_shared<::Microsoft::ReactNative::CompositionEventHandler>(m_context, *this);
     m_CompositionEventHandler->Initialize();
     m_isInitialized = true;
   }
@@ -545,6 +569,7 @@ void ReactNativeIsland::ClearLoadingUI() noexcept {
 void ReactNativeIsland::EnsureLoadingUI() noexcept {}
 
 void ReactNativeIsland::ShowInstanceLoaded() noexcept {
+  VerifyElseCrash(!m_isFragment);
   if (m_rootVisual) {
     ClearLoadingUI();
 
@@ -740,6 +765,9 @@ void ReactNativeIsland::InitTextScaleMultiplier() noexcept {
 winrt::Windows::Foundation::Size ReactNativeIsland::Measure(
     const winrt::Microsoft::ReactNative::LayoutConstraints &layoutConstraints,
     const winrt::Windows::Foundation::Point &viewportOffset) const {
+  if (m_isFragment)
+    winrt::throw_hresult(E_ILLEGAL_METHOD_CALL);
+
   facebook::react::Size size{0, 0};
 
   if (layoutConstraints.LayoutDirection != winrt::Microsoft::ReactNative::LayoutDirection::LeftToRight &&
@@ -781,7 +809,7 @@ void ReactNativeIsland::Arrange(
   facebook::react::LayoutConstraints fbLayoutConstraints;
   ApplyConstraints(layoutConstraints, fbLayoutConstraints);
 
-  if (m_isInitialized && m_rootTag != -1) {
+  if (m_isInitialized && m_rootTag != -1 && !m_isFragment) {
     if (auto fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
             winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()))) {
       facebook::react::LayoutContext context;
@@ -820,6 +848,23 @@ winrt::Microsoft::UI::Content::ContentIsland ReactNativeIsland::Island() {
             rootVisual));
     m_island = winrt::Microsoft::UI::Content::ContentIsland::Create(rootVisual);
 
+    auto focusController = winrt::Microsoft::UI::Input::InputFocusController::GetForIsland(m_island);
+    focusController.NavigateFocusRequested(
+        [weakThis = get_weak()](
+            const auto &sender, const winrt::Microsoft::UI::Input::FocusNavigationRequestEventArgs &args) {
+          if (auto pThis = weakThis.get()) {
+            if (auto rootView = pThis->GetComponentView()) {
+              args.Result(
+                  rootView->NavigateFocus(winrt::Microsoft::ReactNative::FocusNavigationRequest(
+                      winrt::Microsoft::ReactNative::FocusNavigationReason::First))
+                      ? winrt::Microsoft::UI::Input::FocusNavigationResult::Moved
+                      : winrt::Microsoft::UI::Input::FocusNavigationResult::NotMoved);
+            } else {
+              args.Result(winrt::Microsoft::UI::Input::FocusNavigationResult::NoFocusableElements);
+            }
+          }
+        });
+
     // ContentIsland does not support weak_ref, so we cannot use auto_revoke for these events
     m_islandAutomationProviderRequestedToken = m_island.AutomationProviderRequested(
         [weakThis = get_weak()](
@@ -903,13 +948,29 @@ void ReactNativeIsland::OnUnmounted() noexcept {
   if (!m_mounted)
     return;
   m_mounted = false;
+
+  if (m_island && m_island.IsConnected()) {
+    auto focusController = winrt::Microsoft::UI::Input::InputFocusController::GetForIsland(m_island);
+    auto request = winrt::Microsoft::UI::Input::FocusNavigationRequest::Create(
+        winrt::Microsoft::UI::Input::FocusNavigationReason::Programmatic);
+    if (focusController.HasFocus()) {
+      focusController.DepartFocus(request);
+    }
+  }
+
   if (auto componentView = GetComponentView()) {
     componentView->onUnmounted();
   }
 }
 
-winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView *
+winrt::com_ptr<winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView>
 ReactNativeIsland::GetComponentView() noexcept {
+  if (auto portal = m_portal.get()) {
+    return winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::PortalComponentView>(portal)
+        ->ContentRoot()
+        .as<winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView>();
+  }
+
   if (!m_context || m_context.Handle().LoadingState() != winrt::Microsoft::ReactNative::LoadingState::Loaded ||
       m_rootTag == -1)
     return nullptr;
@@ -919,8 +980,7 @@ ReactNativeIsland::GetComponentView() noexcept {
     auto rootComponentViewDescriptor = fabricuiManager->GetViewRegistry().componentViewDescriptorWithTag(
         static_cast<facebook::react::SurfaceId>(m_rootTag));
     return rootComponentViewDescriptor.view
-        .as<winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView>()
-        .get();
+        .as<winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView>();
   }
   return nullptr;
 }

package/Microsoft.ReactNative/Fabric/Composition/ReactNativeIsland.h

@@ -12,6 +12,7 @@
 #include <winrt/Microsoft.ReactNative.h>
 #include <winrt/Windows.UI.ViewManagement.h>
 #include "CompositionEventHandler.h"
+#include "PortalComponentView.h"
 #include "ReactHost/React.h"
 
 namespace winrt::Microsoft::ReactNative::implementation {
@@ -48,15 +49,15 @@ struct ReactNativeIsland
   ~ReactNativeIsland() noexcept;
 
   ReactNativeIsland(const winrt::Microsoft::UI::Composition::Compositor &compositor) noexcept;
-  ReactNativeIsland(
-      const winrt::Microsoft::UI::Composition::Compositor &compositor,
-      winrt::Microsoft::ReactNative::IReactContext context,
-      winrt::Microsoft::ReactNative::ComponentView componentView) noexcept;
+  ReactNativeIsland(const winrt::Microsoft::ReactNative::Composition::PortalComponentView &portal) noexcept;
+
+  static winrt::Microsoft::ReactNative::ReactNativeIsland CreatePortal(
+      const winrt::Microsoft::ReactNative::Composition::PortalComponentView &portal) noexcept;
   winrt::Microsoft::UI::Content::ContentIsland Island();
 
   // property ReactViewHost
   ReactNative::IReactViewHost ReactViewHost() noexcept;
-  void ReactViewHost(ReactNative::IReactViewHost const &value) noexcept;
+  void ReactViewHost(ReactNative::IReactViewHost const &value);
 
   winrt::Microsoft::UI::Composition::Visual RootVisual() noexcept;
 
@@ -104,7 +105,8 @@ struct ReactNativeIsland
   winrt::Microsoft::ReactNative::FocusNavigationResult NavigateFocus(
       const winrt::Microsoft::ReactNative::FocusNavigationRequest &request) noexcept;
 
-  winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView *GetComponentView() noexcept;
+  winrt::com_ptr<winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView>
+  GetComponentView() noexcept;
 
   int64_t RootTag() const noexcept;
 
@@ -153,8 +155,12 @@ struct ReactNativeIsland
   bool m_hasRenderedVisual{false};
   bool m_showingLoadingUI{false};
   bool m_mounted{false};
+  winrt::weak_ref<winrt::Microsoft::ReactNative::Composition::PortalComponentView> m_portal{nullptr};
   IReactDispatcher m_uiDispatcher{nullptr};
   winrt::IInspectable m_uiaProvider{nullptr};
+
+  // This is the surfaceId that this island belongs to.
+  // In the case of portal content root, this will be the surfaceId that contains the portal.
   int64_t m_rootTag{-1};
   float m_scaleFactor{1.0};
   float m_textScaleMultiplier{1.0};