react-native-windows 0.74.20 → 0.74.22

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

@@ -0,0 +1,133 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "ContentIslandComponentView.h"
+
+#include <Fabric/FabricUIManagerModule.h>
+#include <IReactContext.h>
+#include <UI.Xaml.Controls.h>
+#include <Utils/ValueUtils.h>
+#include <winrt/Microsoft.UI.Content.h>
+#include <winrt/Windows.UI.Composition.h>
+#include "CompositionContextHelper.h"
+#include "RootComponentView.h"
+
+#include "Composition.ContentIslandComponentView.g.cpp"
+
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
+
+ContentIslandComponentView::ContentIslandComponentView(
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext)
+    : base_type(ViewComponentView::defaultProps(), compContext, tag, reactContext, ComponentViewFeatures::Default) {
+  m_mountedToken = Mounted([](const winrt::IInspectable &, const winrt::Microsoft::ReactNative::ComponentView &view) {
+    view.as<ContentIslandComponentView>()->OnMounted();
+  });
+  m_unmountedToken =
+      Unmounted([](const winrt::IInspectable &, const winrt::Microsoft::ReactNative::ComponentView &view) {
+        view.as<ContentIslandComponentView>()->OnUnmounted();
+      });
+}
+
+void ContentIslandComponentView::OnMounted() noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+  m_childContentLink = winrt::Microsoft::UI::Content::ChildContentLink::Create(
+      rootComponentView()->parentContentIsland(),
+      winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(Visual())
+          .as<winrt::Microsoft::UI::Composition::ContainerVisual>());
+  m_childContentLink.ActualSize({m_layoutMetrics.frame.size.width, m_layoutMetrics.frame.size.height});
+  if (m_islandToConnect) {
+    m_childContentLink.Connect(m_islandToConnect);
+    m_islandToConnect = nullptr;
+  }
+
+  ParentLayoutChanged();
+  auto view = Parent();
+  while (view) {
+    m_layoutMetricChangedRevokers.push_back(view.LayoutMetricsChanged(
+        winrt::auto_revoke,
+        [wkThis = get_weak()](
+            const winrt::IInspectable &sender, const winrt::Microsoft::ReactNative::LayoutMetricsChangedArgs &args) {
+          if (auto strongThis = wkThis.get()) {
+            strongThis->ParentLayoutChanged();
+          }
+        }));
+    view = view.Parent();
+  }
+#endif
+}
+
+void ContentIslandComponentView::OnUnmounted() noexcept {
+  m_layoutMetricChangedRevokers.clear();
+}
+
+void ContentIslandComponentView::ParentLayoutChanged() noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+  if (m_layoutChangePosted)
+    return;
+
+  m_layoutChangePosted = true;
+  ReactContext().UIDispatcher().Post([wkThis = get_weak()]() {
+    if (auto strongThis = wkThis.get()) {
+      auto clientRect = strongThis->getClientRect();
+
+      strongThis->m_childContentLink.OffsetOverride(
+          {static_cast<float>(clientRect.left), static_cast<float>(clientRect.top)});
+      strongThis->m_layoutChangePosted = false;
+    }
+  });
+#endif
+}
+
+ContentIslandComponentView::~ContentIslandComponentView() noexcept {
+  if (m_islandToConnect) {
+    m_islandToConnect.Close();
+  }
+}
+
+void ContentIslandComponentView::MountChildComponentView(
+    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
+    uint32_t index) noexcept {
+  assert(false);
+  base_type::MountChildComponentView(childComponentView, index);
+}
+
+void ContentIslandComponentView::UnmountChildComponentView(
+    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
+    uint32_t index) noexcept {
+  assert(false);
+  base_type::UnmountChildComponentView(childComponentView, index);
+}
+
+void ContentIslandComponentView::updateLayoutMetrics(
+    facebook::react::LayoutMetrics const &layoutMetrics,
+    facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+  if (m_childContentLink) {
+    m_childContentLink.ActualSize({layoutMetrics.frame.size.width, layoutMetrics.frame.size.height});
+    ParentLayoutChanged();
+  }
+#endif
+  base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
+}
+
+void ContentIslandComponentView::Connect(const winrt::Microsoft::UI::Content::ContentIsland &contentIsland) noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+  if (m_childContentLink) {
+    m_islandToConnect = nullptr;
+    m_childContentLink.Connect(contentIsland);
+  } else {
+    m_islandToConnect = contentIsland;
+  }
+#endif
+}
+
+void ContentIslandComponentView::prepareForRecycle() noexcept {
+  Super::prepareForRecycle();
+}
+
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -0,0 +1,61 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include <Fabric/ComponentView.h>
+
+#include <Microsoft.ReactNative.Cxx/ReactContext.h>
+#include <winrt/Microsoft.UI.Content.h>
+#include <winrt/Windows.UI.Composition.h>
+#include "CompositionHelpers.h"
+#include "CompositionViewComponentView.h"
+
+#pragma warning(push)
+#pragma warning(disable : 4244 4305)
+#include <react/renderer/components/view/ViewProps.h>
+#pragma warning(pop)
+#include "Composition.ContentIslandComponentView.g.h"
+
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
+
+struct ContentIslandComponentView : ContentIslandComponentViewT<ContentIslandComponentView, ViewComponentView> {
+  using Super = ContentIslandComponentViewT<ContentIslandComponentView, ViewComponentView>;
+
+  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 Connect(const winrt::Microsoft::UI::Content::ContentIsland &contentIsland) noexcept;
+
+  void updateLayoutMetrics(
+      facebook::react::LayoutMetrics const &layoutMetrics,
+      facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept;
+
+  void prepareForRecycle() noexcept override;
+
+  ContentIslandComponentView(
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
+      facebook::react::Tag tag,
+      winrt::Microsoft::ReactNative::ReactContext const &reactContext);
+  ~ContentIslandComponentView() noexcept;
+
+ private:
+  void OnMounted() noexcept;
+  void OnUnmounted() noexcept;
+  void ParentLayoutChanged() noexcept;
+
+  bool m_layoutChangePosted{false};
+  winrt::Microsoft::UI::Content::ContentIsland m_islandToConnect{nullptr};
+  winrt::event_token m_mountedToken;
+  winrt::event_token m_unmountedToken;
+  std::vector<winrt::Microsoft::ReactNative::ComponentView::LayoutMetricsChanged_revoker> m_layoutMetricChangedRevokers;
+#ifdef USE_EXPERIMENTAL_WINUI3
+  winrt::Microsoft::UI::Content::ChildContentLink m_childContentLink{nullptr};
+#endif
+};
+
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -21,8 +21,7 @@ DebuggingOverlayComponentView::DebuggingOverlayComponentView(
           reactContext,
           ComponentViewFeatures::Default &
               ~(ComponentViewFeatures::Background | ComponentViewFeatures::ShadowProps |
-                ComponentViewFeatures::NativeBorder),
-          false) {}
+                ComponentViewFeatures::NativeBorder)) {}
 
 void DebuggingOverlayComponentView::MountChildComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
@@ -68,17 +67,21 @@ struct TraceUpdate {
 };
 
 void DebuggingOverlayComponentView::HandleCommand(
-    winrt::hstring commandName,
-    const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
+    const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept {
+  base_type::HandleCommand(args);
+  if (args.Handled())
+    return;
+
+  auto commandName = args.CommandName();
   if (commandName == L"highlightTraceUpdates") {
     std::vector<TraceUpdate> updates;
-    winrt::Microsoft::ReactNative::ReadArgs(args, updates);
+    winrt::Microsoft::ReactNative::ReadArgs(args.CommandArgs(), updates);
     // TODO should create visuals that get removed after 2 seconds
     return;
   }
   if (commandName == L"highlightElements") {
     std::vector<ElementRectangle> elements;
-    winrt::Microsoft::ReactNative::ReadArgs(args, elements);
+    winrt::Microsoft::ReactNative::ReadArgs(args.CommandArgs(), elements);
 
     if (auto root = rootComponentView()) {
       auto rootVisual = root->OuterVisual();
@@ -107,8 +110,6 @@ void DebuggingOverlayComponentView::HandleCommand(
     }
     return;
   }
-
-  base_type::HandleCommand(commandName, args);
 }
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -29,8 +29,7 @@ struct DebuggingOverlayComponentView
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext);
 
-  void HandleCommand(winrt::hstring commandName, const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept
-      override;
+  void HandleCommand(const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept override;
 
  private:
   uint32_t m_activeOverlays{0};

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

@@ -22,19 +22,26 @@ int32_t GotFocusEventArgs::OriginalSource() noexcept {
 
 LosingFocusEventArgs::LosingFocusEventArgs(
     const winrt::Microsoft::ReactNative::ComponentView &originalSource,
+    winrt::Microsoft::ReactNative::FocusNavigationDirection direction,
     const winrt::Microsoft::ReactNative::ComponentView &oldFocusedComponent,
     const winrt::Microsoft::ReactNative::ComponentView &newFocusedComponent)
     : m_originalSource(originalSource ? originalSource.Tag() : -1),
+      m_direction(direction),
       m_old(oldFocusedComponent),
       m_new(newFocusedComponent) {}
 
-int32_t LosingFocusEventArgs::OriginalSource() noexcept {
+int32_t LosingFocusEventArgs::OriginalSource() const noexcept {
   return m_originalSource;
 }
-winrt::Microsoft::ReactNative::ComponentView LosingFocusEventArgs::NewFocusedComponent() noexcept {
+
+winrt::Microsoft::ReactNative::FocusNavigationDirection LosingFocusEventArgs::Direction() const noexcept {
+  return m_direction;
+}
+
+winrt::Microsoft::ReactNative::ComponentView LosingFocusEventArgs::NewFocusedComponent() const noexcept {
   return m_new;
 }
-winrt::Microsoft::ReactNative::ComponentView LosingFocusEventArgs::OldFocusedComponent() noexcept {
+winrt::Microsoft::ReactNative::ComponentView LosingFocusEventArgs::OldFocusedComponent() const noexcept {
   return m_old;
 }
 
@@ -58,19 +65,26 @@ void LosingFocusEventArgs::TrySetNewFocusedComponent(
 
 GettingFocusEventArgs::GettingFocusEventArgs(
     const winrt::Microsoft::ReactNative::ComponentView &originalSource,
+    winrt::Microsoft::ReactNative::FocusNavigationDirection direction,
     const winrt::Microsoft::ReactNative::ComponentView &oldFocusedComponent,
     const winrt::Microsoft::ReactNative::ComponentView &newFocusedComponent)
     : m_originalSource(originalSource ? originalSource.Tag() : -1),
+      m_direction(direction),
       m_old(oldFocusedComponent),
       m_new(newFocusedComponent) {}
 
-int32_t GettingFocusEventArgs::OriginalSource() noexcept {
+int32_t GettingFocusEventArgs::OriginalSource() const noexcept {
   return m_originalSource;
 }
-winrt::Microsoft::ReactNative::ComponentView GettingFocusEventArgs::NewFocusedComponent() noexcept {
+
+winrt::Microsoft::ReactNative::FocusNavigationDirection GettingFocusEventArgs::Direction() const noexcept {
+  return m_direction;
+}
+
+winrt::Microsoft::ReactNative::ComponentView GettingFocusEventArgs::NewFocusedComponent() const noexcept {
   return m_new;
 }
-winrt::Microsoft::ReactNative::ComponentView GettingFocusEventArgs::OldFocusedComponent() noexcept {
+winrt::Microsoft::ReactNative::ComponentView GettingFocusEventArgs::OldFocusedComponent() const noexcept {
   return m_old;
 }
 

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

@@ -32,17 +32,21 @@ struct LosingFocusEventArgs
     : winrt::Microsoft::ReactNative::implementation::LosingFocusEventArgsT<LosingFocusEventArgs> {
   LosingFocusEventArgs(
       const winrt::Microsoft::ReactNative::ComponentView &originalSource,
+      winrt::Microsoft::ReactNative::FocusNavigationDirection direction,
       const winrt::Microsoft::ReactNative::ComponentView &oldFocusedComponent,
       const winrt::Microsoft::ReactNative::ComponentView &newFocusedComponent);
-  int32_t OriginalSource() noexcept;
-  winrt::Microsoft::ReactNative::ComponentView NewFocusedComponent() noexcept;
-  winrt::Microsoft::ReactNative::ComponentView OldFocusedComponent() noexcept;
+  int32_t OriginalSource() const noexcept;
+  winrt::Microsoft::ReactNative::FocusNavigationDirection Direction() const noexcept;
+
+  winrt::Microsoft::ReactNative::ComponentView NewFocusedComponent() const noexcept;
+  winrt::Microsoft::ReactNative::ComponentView OldFocusedComponent() const noexcept;
 
   void TryCancel() noexcept;
   void TrySetNewFocusedComponent(const winrt::Microsoft::ReactNative::ComponentView &newFocusedComponent) noexcept;
 
  private:
   const int32_t m_originalSource;
+  const winrt::Microsoft::ReactNative::FocusNavigationDirection m_direction;
   winrt::Microsoft::ReactNative::ComponentView m_old{nullptr};
   winrt::Microsoft::ReactNative::ComponentView m_new{nullptr};
 };
@@ -51,17 +55,20 @@ struct GettingFocusEventArgs
     : winrt::Microsoft::ReactNative::implementation::GettingFocusEventArgsT<GettingFocusEventArgs> {
   GettingFocusEventArgs(
       const winrt::Microsoft::ReactNative::ComponentView &originalSource,
+      winrt::Microsoft::ReactNative::FocusNavigationDirection direction,
       const winrt::Microsoft::ReactNative::ComponentView &oldFocusedComponent,
       const winrt::Microsoft::ReactNative::ComponentView &newFocusedComponent);
-  int32_t OriginalSource() noexcept;
-  winrt::Microsoft::ReactNative::ComponentView NewFocusedComponent() noexcept;
-  winrt::Microsoft::ReactNative::ComponentView OldFocusedComponent() noexcept;
+  int32_t OriginalSource() const noexcept;
+  winrt::Microsoft::ReactNative::FocusNavigationDirection Direction() const noexcept;
+  winrt::Microsoft::ReactNative::ComponentView NewFocusedComponent() const noexcept;
+  winrt::Microsoft::ReactNative::ComponentView OldFocusedComponent() const noexcept;
 
   void TryCancel() noexcept;
   void TrySetNewFocusedComponent(const winrt::Microsoft::ReactNative::ComponentView &newFocusedComponent) noexcept;
 
  private:
   const int32_t m_originalSource;
+  const winrt::Microsoft::ReactNative::FocusNavigationDirection m_direction;
   winrt::Microsoft::ReactNative::ComponentView m_old{nullptr};
   winrt::Microsoft::ReactNative::ComponentView m_new{nullptr};
 };

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

@@ -70,8 +70,7 @@ ImageComponentView::ImageComponentView(
           compContext,
           tag,
           reactContext,
-          ComponentViewFeatures::Default & ~ComponentViewFeatures::Background,
-          false) {}
+          ComponentViewFeatures::Default & ~ComponentViewFeatures::Background) {}
 
 void ImageComponentView::MountChildComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
@@ -185,7 +184,6 @@ void ImageComponentView::prepareForRecycle() noexcept {
 winrt::Microsoft::ReactNative::ImageProps ImageComponentView::ImageProps() noexcept {
   // We do not currently support custom ImageComponentView's
   // If we did we would need to create a AbiImageProps and possibly return them here
-  assert(!m_customComponent);
   return winrt::make<winrt::Microsoft::ReactNative::implementation::ImageProps>(viewProps());
 }
 
@@ -196,7 +194,6 @@ winrt::Microsoft::ReactNative::ImageProps ImageComponentView::ViewProps() noexce
 winrt::Microsoft::ReactNative::ViewProps ImageComponentView::ViewPropsInner() noexcept {
   // We do not currently support custom ImageComponentView's
   // If we did we would need to create a AbiImageProps and possibly return them here
-  assert(!m_customComponent);
   return winrt::make<winrt::Microsoft::ReactNative::implementation::ImageProps>(viewProps());
 }
 

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

@@ -27,8 +27,7 @@ WindowsModalHostComponentView::WindowsModalHostComponentView(
           compContext,
           tag,
           reactContext,
-          ComponentViewFeatures::Default & ~ComponentViewFeatures::Background,
-          false) {
+          ComponentViewFeatures::Default & ~ComponentViewFeatures::Background) {
   m_context = reactContext; // save context
 }
 
@@ -192,9 +191,8 @@ void WindowsModalHostComponentView::UnmountChildComponentView(
 }
 
 void WindowsModalHostComponentView::HandleCommand(
-    winrt::hstring commandName,
-    const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
-  Super::HandleCommand(commandName, args);
+    const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept {
+  Super::HandleCommand(args);
 }
 
 void WindowsModalHostComponentView::updateProps(

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

@@ -28,8 +28,7 @@ struct WindowsModalHostComponentView
   void UnmountChildComponentView(
       const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
       uint32_t index) noexcept override;
-  void HandleCommand(winrt::hstring commandName, const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept
-      override;
+  void HandleCommand(const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept override;
   void updateState(facebook::react::State::Shared const &state, facebook::react::State::Shared const &oldState) noexcept
       override;
 

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

@@ -27,8 +27,7 @@ ParagraphComponentView::ParagraphComponentView(
           compContext,
           tag,
           reactContext,
-          ComponentViewFeatures::Default & ~ComponentViewFeatures::Background,
-          false) {}
+          ComponentViewFeatures::Default & ~ComponentViewFeatures::Background) {}
 
 void ParagraphComponentView::MountChildComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
@@ -68,10 +67,6 @@ void ParagraphComponentView::updateProps(
   Super::updateProps(props, oldProps);
 }
 
-void ParagraphComponentView::updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept {
-  Super::updateEventEmitter(eventEmitter);
-}
-
 void ParagraphComponentView::updateState(
     facebook::react::State::Shared const &state,
     facebook::react::State::Shared const &oldState) noexcept {

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

@@ -33,7 +33,6 @@ struct ParagraphComponentView : ParagraphComponentViewT<ParagraphComponentView,
       uint32_t index) noexcept override;
   void updateProps(facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept
       override;
-  void updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept override;
   void updateLayoutMetrics(
       facebook::react::LayoutMetrics const &layoutMetrics,
       facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;

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

@@ -4,6 +4,7 @@
 #include "pch.h"
 #include "ReactCompositionViewComponentBuilder.h"
 #include <Fabric/Composition/CompositionViewComponentView.h>
+#include <Fabric/Composition/ContentIslandComponentView.h>
 #include <strsafe.h>
 #include "DynamicWriter.h"
 #include "ReactHost/MsoUtils.h"
@@ -46,16 +47,74 @@ LayoutHandler ReactCompositionViewComponentBuilder::LayoutHandler() const noexce
   return m_layoutHandler;
 }
 
-void ReactCompositionViewComponentBuilder::SetCreateComponentView(ComponentViewFactory impl) noexcept {
-  m_createComponentView = impl;
-  assert(!m_createView); // Only SetCreateComponentView OR SetCreateViewComponentView should be called
+void ReactCompositionViewComponentBuilder::InitializeComponentView(
+    const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+  auto self = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(view);
+  self->MarkAsCustomComponent();
+  if (m_customCommandHandler)
+    self->CustomCommandHandler(m_customCommandHandler);
+  if (m_finalizeUpdateHandler)
+    self->FinalizeUpdateHandler(m_finalizeUpdateHandler);
+  if (m_updatePropsHandler)
+    self->UpdatePropsHandler(m_updatePropsHandler);
+  if (m_updateStateHandler)
+    self->UpdateStateHandler(m_updateStateHandler);
+  if (m_updateEventEmitterHandler)
+    self->UpdateEventEmitterHandler(m_updateEventEmitterHandler);
+  if (m_mountChildComponentViewHandler)
+    self->MountChildComponentViewHandler(m_mountChildComponentViewHandler);
+  if (m_unmountChildComponentViewHandler)
+    self->UnmountChildComponentViewHandler(m_unmountChildComponentViewHandler);
+  if (m_createVisualHandler)
+    view.as<winrt::Microsoft::ReactNative::Composition::implementation::ViewComponentView>()->CreateVisualHandler(
+        m_createVisualHandler);
+}
+
+void ReactCompositionViewComponentBuilder::SetComponentViewInitializer(
+    const ComponentViewInitializer &initializer) noexcept {
+  m_fnCreateView =
+      [initializer](const IReactContext &reactContext, int32_t tag, const Experimental::ICompositionContext &context) {
+        auto view = winrt::make<winrt::Microsoft::ReactNative::implementation::ComponentView>(tag, reactContext);
+        initializer(view);
+        return view;
+      };
+  m_descriptorConstructorFactory = []() {
+    return &facebook::react::concreteComponentDescriptorConstructor<::Microsoft::ReactNative::AbiComponentDescriptor>;
+  };
+}
+
+void ReactCompositionViewComponentBuilder::SetViewComponentViewInitializer(
+    const ViewComponentViewInitializer &initializer) noexcept {
+  m_fnCreateView =
+      [initializer](const IReactContext &reactContext, int32_t tag, const Experimental::ICompositionContext &context) {
+        auto view = winrt::Microsoft::ReactNative::Composition::implementation::ViewComponentView::Create(
+                        context, tag, reactContext)
+                        .as<winrt::Microsoft::ReactNative::Composition::ViewComponentView>();
+        initializer(view);
+        return view;
+      };
+  m_descriptorConstructorFactory = []() {
+    return &facebook::react::concreteComponentDescriptorConstructor<
+        ::Microsoft::ReactNative::AbiViewComponentDescriptor>;
+  };
+}
+
+void ReactCompositionViewComponentBuilder::SetContentIslandComponentViewInitializer(
+    const ComponentIslandComponentViewInitializer &initializer) noexcept {
+  m_fnCreateView = [initializer](
+                       const IReactContext &reactContext, int32_t tag, const Experimental::ICompositionContext &context)
+      -> winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView {
+    auto view = winrt::make<winrt::Microsoft::ReactNative::Composition::implementation::ContentIslandComponentView>(
+        context, tag, reactContext);
+    initializer(view);
+    return view;
+  };
+  m_descriptorConstructorFactory = []() {
+    return &facebook::react::concreteComponentDescriptorConstructor<
+        ::Microsoft::ReactNative::AbiViewComponentDescriptor>;
+  };
 }
 
-void ReactCompositionViewComponentBuilder::SetCreateViewComponentView(
-    CompositionViewComponentViewFactory impl) noexcept {
-  m_createView = impl;
-  assert(!m_createComponentView); // Only SetCreateComponentView OR SetCreateViewComponentView should be called
-}
 // (Object handle, Microsoft.ReactNative.IComponentState state) => void
 // void ReactCompositionViewComponentBuilder::SetStateUpdater(StateUpdater impl) noexcept {
 //  m_stateUpdater = impl;
@@ -93,22 +152,53 @@ void ReactCompositionViewComponentBuilder::SetLayoutHandler(
   m_layoutHandler = impl;
 }
 
+void ReactCompositionViewComponentBuilder::SetCustomCommandHandler(HandleCommandDelegate impl) noexcept {
+  m_customCommandHandler = impl;
+}
+
+void ReactCompositionViewComponentBuilder::SetFinalizeUpdateHandler(UpdateFinalizerDelegate impl) noexcept {
+  m_finalizeUpdateHandler = impl;
+}
+
+void ReactCompositionViewComponentBuilder::SetUpdatePropsHandler(UpdatePropsDelegate impl) noexcept {
+  m_updatePropsHandler = impl;
+}
+
+void ReactCompositionViewComponentBuilder::SetUpdateStateHandler(UpdateStateDelegate impl) noexcept {
+  m_updateStateHandler = impl;
+}
+
+void ReactCompositionViewComponentBuilder::SetUpdateEventEmitterHandler(UpdateEventEmitterDelegate impl) noexcept {
+  m_updateEventEmitterHandler = impl;
+}
+
+void ReactCompositionViewComponentBuilder::SetMountChildComponentViewHandler(
+    MountChildComponentViewDelegate impl) noexcept {
+  m_mountChildComponentViewHandler = impl;
+}
+
+void ReactCompositionViewComponentBuilder::SetUnmountChildComponentViewHandler(
+    UnmountChildComponentViewDelegate impl) noexcept {
+  m_unmountChildComponentViewHandler = impl;
+}
+
+void ReactCompositionViewComponentBuilder::SetCreateVisualHandler(CreateVisualDelegate impl) noexcept {
+  m_createVisualHandler = impl;
+}
+
 winrt::Microsoft::ReactNative::ComponentView ReactCompositionViewComponentBuilder::CreateView(
     const IReactContext &reactContext,
     int32_t tag,
     const Experimental::ICompositionContext &context) noexcept {
-  if (m_createView) {
-    auto args = winrt::make<implementation::CreateCompositionComponentViewArgs>(reactContext, tag, context);
-    return m_createView(args);
-  } else {
-    assert(m_createComponentView);
-    auto args = winrt::make<winrt::Microsoft::ReactNative::implementation::CreateComponentViewArgs>(reactContext, tag);
-    return m_createComponentView(args);
-  }
+  assert(m_fnCreateView);
+  auto view = m_fnCreateView(reactContext, tag, context);
+  InitializeComponentView(view);
+  return view;
 }
 
-bool ReactCompositionViewComponentBuilder::IsViewComponent() const noexcept {
-  return m_createView != nullptr;
+facebook::react::ComponentDescriptorConstructor *ReactCompositionViewComponentBuilder::GetComponentDescriptorProvider()
+    const noexcept {
+  return m_descriptorConstructorFactory();
 }
 
 } // namespace winrt::Microsoft::ReactNative::Composition