react-native-windows 0.74.0-preview.2 → 0.74.0-preview.4

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

@@ -14,6 +14,7 @@
 #include <Utils/KeyboardUtils.h>
 #include <Utils/ValueUtils.h>
 #include <Views/FrameworkElementTransferProperties.h>
+#include <winrt/Microsoft.ReactNative.Composition.Experimental.h>
 #include <winrt/Windows.UI.Composition.h>
 #include "CompositionContextHelper.h"
 #include "CompositionDynamicAutomationProvider.h"
@@ -31,11 +32,15 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation {
 CreateCompositionComponentViewArgs::CreateCompositionComponentViewArgs(
     const winrt::Microsoft::ReactNative::IReactContext &reactContext,
     facebook::react::Tag tag,
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compositionContext)
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compositionContext)
     : base_type(reactContext, tag), m_compositionContext(compositionContext){};
 
-winrt::Microsoft::ReactNative::Composition::ICompositionContext CreateCompositionComponentViewArgs::CompositionContext()
-    const noexcept {
+winrt::Microsoft::UI::Composition::Compositor CreateCompositionComponentViewArgs::Compositor() const noexcept {
+  return winrt::Microsoft::ReactNative::Composition::CompositionUIService::GetCompositor(ReactContext().Properties());
+}
+
+winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext
+CreateCompositionComponentViewArgs::CompositionContext() const noexcept {
   return m_compositionContext;
 }
 
@@ -48,10 +53,17 @@ void CreateCompositionComponentViewArgs::Features(ComponentViewFeatures value) n
 }
 
 ComponentView::ComponentView(const winrt::Microsoft::ReactNative::Composition::CreateCompositionComponentViewArgs &args)
-    : ComponentView(args.CompositionContext(), args.Tag(), args.ReactContext(), args.Features(), true) {}
+    : ComponentView(
+          winrt::get_self<
+              winrt::Microsoft::ReactNative::Composition::implementation::CreateCompositionComponentViewArgs>(args)
+              ->CompositionContext(),
+          args.Tag(),
+          args.ReactContext(),
+          args.Features(),
+          true) {}
 
 ComponentView::ComponentView(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext,
     ComponentViewFeatures flags,
@@ -74,9 +86,9 @@ facebook::react::Props::Shared ComponentView::props() noexcept {
 void ComponentView::onThemeChanged() noexcept {
   if ((m_flags & ComponentViewFeatures::Background) == ComponentViewFeatures::Background) {
     if (viewProps()->backgroundColor) {
-      Visual().as<ISpriteVisual>().Brush(theme()->Brush(*viewProps()->backgroundColor));
+      Visual().as<Experimental::ISpriteVisual>().Brush(theme()->Brush(*viewProps()->backgroundColor));
     } else {
-      Visual().as<ISpriteVisual>().Brush(nullptr);
+      Visual().as<Experimental::ISpriteVisual>().Brush(nullptr);
     }
   }
 
@@ -108,7 +120,13 @@ winrt::Microsoft::ReactNative::Composition::Theme ComponentView::Theme() const n
   return theme()->get_strong().as<winrt::Microsoft::ReactNative::Composition::Theme>();
 }
 
-winrt::Microsoft::ReactNative::Composition::ICompositionContext ComponentView::CompositionContext() const noexcept {
+winrt::Microsoft::UI::Composition::Compositor ComponentView::Compositor() const noexcept {
+  return winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerCompositor(
+      m_compContext);
+}
+
+winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext ComponentView::CompositionContext()
+    const noexcept {
   return m_compContext;
 }
 
@@ -121,9 +139,9 @@ void ComponentView::updateProps(
   if ((m_flags & ComponentViewFeatures::Background) == ComponentViewFeatures::Background) {
     if (oldViewProps.backgroundColor != newViewProps.backgroundColor) {
       if (newViewProps.backgroundColor) {
-        Visual().as<ISpriteVisual>().Brush(theme()->Brush(*newViewProps.backgroundColor));
+        Visual().as<Experimental::ISpriteVisual>().Brush(theme()->Brush(*newViewProps.backgroundColor));
       } else {
-        Visual().as<ISpriteVisual>().Brush(nullptr);
+        Visual().as<Experimental::ISpriteVisual>().Brush(nullptr);
       }
     }
   }
@@ -295,15 +313,17 @@ const facebook::react::SharedViewEventEmitter &ComponentView::GetEventEmitter()
   return m_eventEmitter;
 }
 
-std::array<winrt::Microsoft::ReactNative::Composition::ISpriteVisual, ComponentView::SpecialBorderLayerCount>
+std::array<
+    winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual,
+    ComponentView::SpecialBorderLayerCount>
 ComponentView::FindSpecialBorderLayers() const noexcept {
-  std::array<winrt::Microsoft::ReactNative::Composition::ISpriteVisual, SpecialBorderLayerCount> layers{
+  std::array<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual, SpecialBorderLayerCount> layers{
       nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr};
 
   if (m_numBorderVisuals) {
     for (uint8_t i = 0; i < m_numBorderVisuals; i++) {
       auto visual = Visual().GetAt(i);
-      layers[i] = visual.as<winrt::Microsoft::ReactNative::Composition::ISpriteVisual>();
+      layers[i] = visual.as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>();
     }
   }
 
@@ -328,12 +348,13 @@ struct RoundedPathParameters {
  * right, bottom right, bottom left). "rectPathGeometry" defines the bounding box of the generated shape.
  */
 static winrt::com_ptr<ID2D1PathGeometry> GenerateRoundedRectPathGeometry(
-    winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     const RoundedPathParameters &params,
     const facebook::react::RectangleEdges<float> &rectPathGeometry) noexcept {
   winrt::com_ptr<ID2D1PathGeometry> pathGeometry;
   winrt::com_ptr<ID2D1Factory1> spD2dFactory;
-  compContext.as<::Microsoft::ReactNative::Composition::ICompositionContextInterop>()->D2DFactory(spD2dFactory.put());
+  compContext.as<::Microsoft::ReactNative::Composition::Experimental::ICompositionContextInterop>()->D2DFactory(
+      spD2dFactory.put());
 
   // Create a path geometry.
   HRESULT hr = spD2dFactory->CreatePathGeometry(pathGeometry.put());
@@ -513,7 +534,7 @@ RoundedPathParameters GenerateRoundedPathParameters(
 }
 
 static winrt::com_ptr<ID2D1PathGeometry> GenerateRoundedRectPathGeometry(
-    winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     const facebook::react::RectangleCorners<float> &baseRadius,
     const facebook::react::RectangleEdges<float> &inset,
     const facebook::react::RectangleEdges<float> &rectPathGeometry) noexcept {
@@ -548,7 +569,8 @@ void DrawShape(
 }
 
 struct AutoDrawHelper {
-  AutoDrawHelper(winrt::com_ptr<::Microsoft::ReactNative::Composition::ICompositionDrawingSurfaceInterop> &surface) {
+  AutoDrawHelper(
+      winrt::com_ptr<::Microsoft::ReactNative::Composition::Experimental::ICompositionDrawingSurfaceInterop> &surface) {
     m_surface = surface;
     m_surface->BeginDraw(m_pRT.put(), &m_offset);
   }
@@ -566,7 +588,7 @@ struct AutoDrawHelper {
   }
 
  private:
-  winrt::com_ptr<::Microsoft::ReactNative::Composition::ICompositionDrawingSurfaceInterop> m_surface;
+  winrt::com_ptr<::Microsoft::ReactNative::Composition::Experimental::ICompositionDrawingSurfaceInterop> m_surface;
   POINT m_offset;
   winrt::com_ptr<ID2D1DeviceContext> m_pRT;
 };
@@ -574,10 +596,11 @@ struct AutoDrawHelper {
 template <typename TShape>
 void SetBorderLayerPropertiesCommon(
     winrt::Microsoft::ReactNative::Composition::implementation::Theme *theme,
-    winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
-    winrt::Microsoft::ReactNative::Composition::ISpriteVisual &layer,
+    winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
+    winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual &layer,
     TShape &shape,
-    winrt::com_ptr<::Microsoft::ReactNative::Composition::ICompositionDrawingSurfaceInterop> &borderTexture,
+    winrt::com_ptr<::Microsoft::ReactNative::Composition::Experimental::ICompositionDrawingSurfaceInterop>
+        &borderTexture,
     const D2D1_RECT_F &textureRect,
     facebook::react::Point anchorPoint,
     facebook::react::Point anchorOffset,
@@ -664,10 +687,11 @@ void SetBorderLayerPropertiesCommon(
 template <typename TShape>
 void SetBorderLayerProperties(
     winrt::Microsoft::ReactNative::Composition::implementation::Theme *theme,
-    winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
-    winrt::Microsoft::ReactNative::Composition::ISpriteVisual &layer,
+    winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
+    winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual &layer,
     TShape &shape,
-    winrt::com_ptr<::Microsoft::ReactNative::Composition::ICompositionDrawingSurfaceInterop> &borderTexture,
+    winrt::com_ptr<::Microsoft::ReactNative::Composition::Experimental::ICompositionDrawingSurfaceInterop>
+        &borderTexture,
     const D2D1_RECT_F &textureRect,
     facebook::react::Point anchorPoint,
     facebook::react::Point anchorOffset,
@@ -700,7 +724,7 @@ void SetBorderLayerProperties(
       layer.Brush(theme->Brush(*borderColor));
 
       winrt::com_ptr<ID2D1Factory1> spD2dFactory;
-      compContext.as<::Microsoft::ReactNative::Composition::ICompositionContextInterop>()->D2DFactory(
+      compContext.as<::Microsoft::ReactNative::Composition::Experimental::ICompositionContextInterop>()->D2DFactory(
           spD2dFactory.put());
 
       winrt::com_ptr<ID2D1TransformedGeometry> transformedShape;
@@ -708,7 +732,8 @@ void SetBorderLayerProperties(
       winrt::check_hresult(
           spD2dFactory->CreateTransformedGeometry(&shape, &translationTransform, transformedShape.put()));
 
-      layer.as<::Microsoft::ReactNative::Composition::IVisualInterop>()->SetClippingPath(transformedShape.get());
+      layer.as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(
+          transformedShape.get());
     }
     /*
                 else
@@ -731,9 +756,10 @@ const float Bottom = 1.0;
 template <typename TShape>
 void DrawAllBorderLayers(
     winrt::Microsoft::ReactNative::Composition::implementation::Theme *theme,
-    winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
-    std::array<winrt::Microsoft::ReactNative::Composition::ISpriteVisual, ComponentView::SpecialBorderLayerCount>
-        &spBorderLayers,
+    winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
+    std::array<
+        winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual,
+        ComponentView::SpecialBorderLayerCount> &spBorderLayers,
     TShape &shape,
     const facebook::react::BorderWidths &borderWidths,
     const facebook::react::BorderRadii &borderRadii,
@@ -742,7 +768,7 @@ void DrawAllBorderLayers(
     const facebook::react::BorderColors &borderColors,
     facebook::react::BorderStyle borderStyle) {
   // Now that we've drawn our nice border in one layer, split it into its component layers
-  winrt::com_ptr<::Microsoft::ReactNative::Composition::ICompositionDrawingSurfaceInterop>
+  winrt::com_ptr<::Microsoft::ReactNative::Composition::Experimental::ICompositionDrawingSurfaceInterop>
       spTextures[ComponentView::SpecialBorderLayerCount];
 
   // Set component border properties
@@ -903,7 +929,7 @@ void DrawAllBorderLayers(
 }
 
 winrt::com_ptr<ID2D1GeometryGroup> GetGeometryForRoundedBorder(
-    winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     const facebook::react::RectangleCorners<float> &radius,
     const facebook::react::RectangleEdges<float> &inset,
     const facebook::react::RectangleEdges<float> &thickness,
@@ -956,7 +982,8 @@ winrt::com_ptr<ID2D1GeometryGroup> GetGeometryForRoundedBorder(
 
   ID2D1Geometry *ppGeometries[] = {outerPathGeometry.get(), innerPathGeometry.get()};
   winrt::com_ptr<ID2D1Factory1> spD2dFactory;
-  compContext.as<::Microsoft::ReactNative::Composition::ICompositionContextInterop>()->D2DFactory(spD2dFactory.put());
+  compContext.as<::Microsoft::ReactNative::Composition::Experimental::ICompositionContextInterop>()->D2DFactory(
+      spD2dFactory.put());
 
   winrt::com_ptr<ID2D1GeometryGroup> geometryGroup = nullptr;
   // Create a geometry group.
@@ -1036,7 +1063,8 @@ facebook::react::BorderMetrics resolveAndAlignBorderMetrics(
 
 bool ComponentView::TryUpdateSpecialBorderLayers(
     winrt::Microsoft::ReactNative::Composition::implementation::Theme *theme,
-    std::array<winrt::Microsoft::ReactNative::Composition::ISpriteVisual, SpecialBorderLayerCount> &spBorderVisuals,
+    std::array<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual, SpecialBorderLayerCount>
+        &spBorderVisuals,
     facebook::react::LayoutMetrics const &layoutMetrics,
     const facebook::react::ViewProps &viewProps) noexcept {
   auto borderMetrics = resolveAndAlignBorderMetrics(layoutMetrics, viewProps);
@@ -1150,13 +1178,13 @@ void ComponentView::finalizeBorderUpdates(
   if (!TryUpdateSpecialBorderLayers(theme(), spBorderLayers, layoutMetrics, viewProps)) {
     for (auto &spBorderLayer : spBorderLayers) {
       if (spBorderLayer) {
-        spBorderLayer.as<winrt::Microsoft::ReactNative::Composition::ISpriteVisual>().Brush(nullptr);
+        spBorderLayer.as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Brush(nullptr);
       }
     }
   }
 }
 
-winrt::Microsoft::ReactNative::Composition::IVisual ComponentView::OuterVisual() const noexcept {
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ComponentView::OuterVisual() const noexcept {
   return m_outerVisual ? m_outerVisual : Visual();
 }
 
@@ -1203,29 +1231,29 @@ void ComponentView::applyShadowProps(const facebook::react::ViewProps &viewProps
   shadow.BlurRadius(viewProps.shadowRadius);
   if (viewProps.shadowColor)
     shadow.Color(theme()->Color(*viewProps.shadowColor));
-  Visual().as<winrt::Microsoft::ReactNative::Composition::ISpriteVisual>().Shadow(shadow);
+  Visual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(shadow);
 }
 
 void ComponentView::updateTransformProps(
     const facebook::react::ViewProps &oldViewProps,
     const facebook::react::ViewProps &newViewProps,
-    winrt::Microsoft::ReactNative::Composition::IVisual visual) noexcept {
+    winrt::Microsoft::ReactNative::Composition::Experimental::IVisual visual) noexcept {
   // check for backfaceVisibility prop
   if (oldViewProps.backfaceVisibility != newViewProps.backfaceVisibility) {
     static_assert(
         static_cast<facebook::react::BackfaceVisibility>(
-            winrt::Microsoft::ReactNative::Composition::BackfaceVisibility::Inherit) ==
+            winrt::Microsoft::ReactNative::Composition::Experimental::BackfaceVisibility::Inherit) ==
         facebook::react::BackfaceVisibility::Auto);
     static_assert(
         static_cast<facebook::react::BackfaceVisibility>(
-            winrt::Microsoft::ReactNative::Composition::BackfaceVisibility::Visible) ==
+            winrt::Microsoft::ReactNative::Composition::Experimental::BackfaceVisibility::Visible) ==
         facebook::react::BackfaceVisibility::Visible);
     static_assert(
         static_cast<facebook::react::BackfaceVisibility>(
-            winrt::Microsoft::ReactNative::Composition::BackfaceVisibility::Hidden) ==
+            winrt::Microsoft::ReactNative::Composition::Experimental::BackfaceVisibility::Hidden) ==
         facebook::react::BackfaceVisibility::Hidden);
-    visual.BackfaceVisibility(
-        static_cast<winrt::Microsoft::ReactNative::Composition::BackfaceVisibility>(newViewProps.backfaceVisibility));
+    visual.BackfaceVisibility(static_cast<winrt::Microsoft::ReactNative::Composition::Experimental::BackfaceVisibility>(
+        newViewProps.backfaceVisibility));
   }
 
   // Transform - TODO doesn't handle multiple of the same kind of transform -- Doesn't handle hittesting updates
@@ -1316,7 +1344,7 @@ void ComponentView::updateBorderLayoutMetrics(
 
   if (borderMetrics.borderRadii.topLeft == 0 && borderMetrics.borderRadii.topRight == 0 &&
       borderMetrics.borderRadii.bottomLeft == 0 && borderMetrics.borderRadii.bottomRight == 0) {
-    Visual().as<::Microsoft::ReactNative::Composition::IVisualInterop>()->SetClippingPath(nullptr);
+    Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr);
   } else {
     winrt::com_ptr<ID2D1PathGeometry> pathGeometry = GenerateRoundedRectPathGeometry(
         m_compContext,
@@ -1327,7 +1355,8 @@ void ComponentView::updateBorderLayoutMetrics(
          layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
          layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
 
-    Visual().as<::Microsoft::ReactNative::Composition::IVisualInterop>()->SetClippingPath(pathGeometry.get());
+    Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(
+        pathGeometry.get());
   }
 
   if (m_layoutMetrics != layoutMetrics) {
@@ -1359,7 +1388,8 @@ ComponentView::supplementalComponentDescriptorProviders() noexcept {
 comp::CompositionPropertySet ComponentView::EnsureCenterPointPropertySet() noexcept {
   if (m_centerPropSet == nullptr) {
     if (auto compositor =
-            winrt::Microsoft::ReactNative::Composition::CompositionContextHelper::InnerCompositor(m_compContext)) {
+            winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerCompositor(
+                m_compContext)) {
       m_centerPropSet = compositor.CreatePropertySet();
       UpdateCenterPropertySet();
       m_centerPropSet.InsertMatrix4x4(L"transform", winrt::Windows::Foundation::Numerics::float4x4::identity());
@@ -1404,12 +1434,13 @@ void ComponentView::EnsureTransformMatrixFacade() noexcept {
 
   auto centerPointPropSet = EnsureCenterPointPropertySet();
   if (auto compositor =
-          winrt::Microsoft::ReactNative::Composition::CompositionContextHelper::InnerCompositor(m_compContext)) {
+          winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerCompositor(
+              m_compContext)) {
     // TODO cache expression instead of creating new ones all the time
     auto expression = compositor.CreateExpressionAnimation(
         L"Matrix4x4.CreateFromScale(PS.dpiScale3Inv) * Matrix4x4.CreateFromTranslation(PS.translation) * PS.transform * Matrix4x4.CreateFromScale(PS.dpiScale3)");
     expression.SetReferenceParameter(L"PS", centerPointPropSet);
-    winrt::Microsoft::ReactNative::Composition::CompositionContextHelper::InnerVisual(OuterVisual())
+    winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(OuterVisual())
         .StartAnimation(L"TransformMatrix", expression);
   }
 }
@@ -1454,10 +1485,17 @@ std::string ComponentView::DefaultHelpText() const noexcept {
 
 ViewComponentView::ViewComponentView(
     const winrt::Microsoft::ReactNative::Composition::CreateCompositionComponentViewArgs &args)
-    : ViewComponentView(args.CompositionContext(), args.Tag(), args.ReactContext(), args.Features(), true) {}
+    : ViewComponentView(
+          winrt::get_self<
+              winrt::Microsoft::ReactNative::Composition::implementation::CreateCompositionComponentViewArgs>(args)
+              ->CompositionContext(),
+          args.Tag(),
+          args.ReactContext(),
+          args.Features(),
+          true) {}
 
 ViewComponentView::ViewComponentView(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext,
     ComponentViewFeatures flags,
@@ -1467,25 +1505,37 @@ ViewComponentView::ViewComponentView(
   m_props = defaultProps;
 }
 
-winrt::Microsoft::ReactNative::Composition::IVisual ViewComponentView::CreateVisual() noexcept {
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ViewComponentView::createVisual() noexcept {
   return m_compContext.CreateSpriteVisual();
 }
 
+winrt::Microsoft::UI::Composition::Visual ViewComponentView::CreateVisual() noexcept {
+  return winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerVisual(
+      createVisual());
+}
+
 void ViewComponentView::ensureVisual() noexcept {
   if (!m_visual) {
     if (m_customComponent) {
       // Review is it expected that I need this cast to call overridden methods?
       winrt::Microsoft::ReactNative::Composition::ViewComponentView outer(*this);
-      m_visual = outer.CreateVisual();
+      winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCreateVisual internalCreateVisual{nullptr};
+      if (outer.try_as(internalCreateVisual)) {
+        m_visual = internalCreateVisual.CreateInternalVisual();
+      } else {
+        m_visual =
+            winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::CreateVisual(
+                outer.CreateVisual());
+      }
     } else {
-      m_visual = CreateVisual();
+      m_visual = createVisual();
     }
     OuterVisual().InsertAt(m_visual, 0);
   }
 }
 
 winrt::Microsoft::ReactNative::ComponentView ViewComponentView::Create(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
   return winrt::make<ViewComponentView>(compContext, tag, reactContext, ComponentViewFeatures::Default, false);
@@ -1679,7 +1729,7 @@ winrt::Microsoft::ReactNative::ViewProps ViewComponentView::ViewProps() noexcept
   return winrt::make<winrt::Microsoft::ReactNative::implementation::ViewProps>(m_props);
 }
 
-winrt::Microsoft::ReactNative::Composition::IVisual ViewComponentView::Visual() const noexcept {
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ViewComponentView::Visual() const noexcept {
   assert(m_visual);
   return m_visual;
 }

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

@@ -27,16 +27,18 @@ struct CreateCompositionComponentViewArgs
   CreateCompositionComponentViewArgs(
       const winrt::Microsoft::ReactNative::IReactContext &reactContext,
       facebook::react::Tag tag,
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compositionContext);
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compositionContext);
 
-  winrt::Microsoft::ReactNative::Composition::ICompositionContext CompositionContext() const noexcept;
+  winrt::Microsoft::UI::Composition::Compositor Compositor() const noexcept;
+
+  winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext CompositionContext() const noexcept;
 
   ComponentViewFeatures Features() const noexcept;
   void Features(ComponentViewFeatures value) noexcept;
 
  private:
   ComponentViewFeatures m_features{ComponentViewFeatures::Default};
-  winrt::Microsoft::ReactNative::Composition::ICompositionContext m_compositionContext;
+  winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext m_compositionContext;
 };
 
 struct ComponentView
@@ -45,17 +47,17 @@ struct ComponentView
 
   ComponentView(winrt::Microsoft::ReactNative::Composition::CreateCompositionComponentViewArgs const &args);
   ComponentView(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext,
       ComponentViewFeatures flags,
       bool customControl);
 
-  virtual winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept {
+  virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept {
     return nullptr;
   };
   // Visual that should be parented to this ComponentView's parent
-  virtual winrt::Microsoft::ReactNative::Composition::IVisual OuterVisual() const noexcept;
+  virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual OuterVisual() const noexcept;
   void updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept override;
   const facebook::react::SharedViewEventEmitter &GetEventEmitter() const noexcept;
   void HandleCommand(winrt::hstring commandName, const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept
@@ -94,7 +96,7 @@ struct ComponentView
   void updateTransformProps(
       const facebook::react::ViewProps &oldViewProps,
       const facebook::react::ViewProps &newViewProps,
-      winrt::Microsoft::ReactNative::Composition::IVisual m_visual) noexcept;
+      winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_visual) noexcept;
   void updateAccessibilityProps(
       const facebook::react::ViewProps &oldView,
       const facebook::react::ViewProps &newViewProps) noexcept;
@@ -116,7 +118,8 @@ struct ComponentView
   virtual std::string DefaultAccessibleName() const noexcept;
   virtual std::string DefaultHelpText() const noexcept;
 
-  winrt::Microsoft::ReactNative::Composition::ICompositionContext CompositionContext() const noexcept;
+  winrt::Microsoft::UI::Composition::Compositor Compositor() const noexcept;
+  winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext CompositionContext() const noexcept;
 
   // Publicaly overridable APIs
   void FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept override;
@@ -129,7 +132,7 @@ struct ComponentView
       facebook::react::Point &localPt) const noexcept;
 
   winrt::IInspectable m_uiaProvider{nullptr};
-  winrt::Microsoft::ReactNative::Composition::ICompositionContext m_compContext;
+  winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext m_compContext;
   comp::CompositionPropertySet m_centerPropSet{nullptr};
   facebook::react::SharedViewEventEmitter m_eventEmitter;
   facebook::react::LayoutMetrics m_layoutMetrics;
@@ -150,23 +153,24 @@ struct ComponentView
       const facebook::react::ViewProps &viewProps) noexcept;
   bool TryUpdateSpecialBorderLayers(
       winrt::Microsoft::ReactNative::Composition::implementation::Theme *theme,
-      std::array<winrt::Microsoft::ReactNative::Composition::ISpriteVisual, SpecialBorderLayerCount> &spBorderVisuals,
+      std::array<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual, SpecialBorderLayerCount>
+          &spBorderVisuals,
       facebook::react::LayoutMetrics const &layoutMetrics,
       const facebook::react::ViewProps &viewProps) noexcept;
-  std::array<winrt::Microsoft::ReactNative::Composition::ISpriteVisual, SpecialBorderLayerCount>
+  std::array<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual, SpecialBorderLayerCount>
   FindSpecialBorderLayers() const noexcept;
   void UpdateCenterPropertySet() noexcept;
 
   ComponentViewFeatures m_flags;
   void showFocusVisual(bool show) noexcept;
-  winrt::Microsoft::ReactNative::Composition::IFocusVisual m_focusVisual{nullptr};
-  winrt::Microsoft::ReactNative::Composition::IVisual m_outerVisual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::IFocusVisual m_focusVisual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_outerVisual{nullptr};
 };
 
 struct ViewComponentView : public ViewComponentViewT<ViewComponentView, ComponentView> {
   ViewComponentView(winrt::Microsoft::ReactNative::Composition::CreateCompositionComponentViewArgs const &args);
   [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
 
@@ -200,23 +204,25 @@ struct ViewComponentView : public ViewComponentViewT<ViewComponentView, Componen
       bool ignorePointerEvents = false) const noexcept override;
   const winrt::Microsoft::ReactNative::IComponentProps userProps(
       facebook::react::Props::Shared const &props) noexcept override;
-  winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept override;
   void ensureVisual() noexcept;
 
   ViewComponentView(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext,
       ComponentViewFeatures flags,
       bool customComponent);
 
-  // Publicaly overridable APIs
-  virtual winrt::Microsoft::ReactNative::Composition::IVisual CreateVisual() noexcept;
+  virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual createVisual() noexcept;
+
+  // Publicly overridable APIs
+  virtual winrt::Microsoft::UI::Composition::Visual CreateVisual() noexcept;
   virtual void UpdateLayoutMetrics(const LayoutMetrics &metrics, const LayoutMetrics &oldMetrics) noexcept;
 
  private:
   facebook::react::SharedViewProps m_props;
-  winrt::Microsoft::ReactNative::Composition::IVisual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_visual{nullptr};
 };
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -11,7 +11,7 @@
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 DebuggingOverlayComponentView::DebuggingOverlayComponentView(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext)
     : base_type(
@@ -38,7 +38,7 @@ void DebuggingOverlayComponentView::UnmountChildComponentView(
 }
 
 winrt::Microsoft::ReactNative::ComponentView DebuggingOverlayComponentView::Create(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
   return winrt::make<DebuggingOverlayComponentView>(compContext, tag, reactContext);

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

@@ -13,7 +13,7 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation {
 struct DebuggingOverlayComponentView
     : DebuggingOverlayComponentViewT<DebuggingOverlayComponentView, ViewComponentView> {
   [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
 
@@ -25,7 +25,7 @@ struct DebuggingOverlayComponentView
       uint32_t index) noexcept override;
 
   DebuggingOverlayComponentView(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext);
 

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

@@ -49,7 +49,7 @@ void ImageComponentView::WindowsImageResponseObserver::didReceiveFailure() const
 }
 
 ImageComponentView::ImageComponentView(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext)
     : Super(
@@ -244,13 +244,14 @@ void ImageComponentView::ensureDrawingSurface() noexcept {
 
     switch (imageProps->resizeMode) {
       case facebook::react::ImageResizeMode::Stretch:
-        m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::Fill);
+        m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::Fill);
         break;
       case facebook::react::ImageResizeMode::Cover:
-        m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::UniformToFill);
+        m_drawingSurface.Stretch(
+            winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::UniformToFill);
         break;
       case facebook::react::ImageResizeMode::Contain:
-        m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::Uniform);
+        m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::Uniform);
         break;
       case facebook::react::ImageResizeMode::Repeat:
         // TODO - set AlignmentRatio back to 0.5f when switching between resizeModes once we no longer recreate the
@@ -262,8 +263,8 @@ void ImageComponentView::ensureDrawingSurface() noexcept {
       case facebook::react::ImageResizeMode::Center: {
         m_drawingSurface.Stretch(
             (height < frame.height && width < frame.width)
-                ? winrt::Microsoft::ReactNative::Composition::CompositionStretch::None
-                : winrt::Microsoft::ReactNative::Composition::CompositionStretch::Uniform);
+                ? winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::None
+                : winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::Uniform);
         break;
       }
       default:
@@ -416,7 +417,7 @@ void ImageComponentView::ensureVisual() noexcept {
   }
 }
 
-winrt::Microsoft::ReactNative::Composition::IVisual ImageComponentView::Visual() const noexcept {
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ImageComponentView::Visual() const noexcept {
   return m_visual;
 }
 
@@ -429,7 +430,7 @@ std::string ImageComponentView::DefaultControlType() const noexcept {
 }
 
 winrt::Microsoft::ReactNative::ComponentView ImageComponentView::Create(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
   return winrt::make<ImageComponentView>(compContext, tag, reactContext);