react-native-windows 0.74.0-preview.3 → 0.74.0

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

@@ -3,24 +3,24 @@
 #pragma once
 
 #ifdef USE_WINUI3
-#include "Composition.MicrosoftCompositionContextHelper.g.h"
+#include "Composition.Experimental.MicrosoftCompositionContextHelper.g.h"
 #endif
-#include "Composition.SystemCompositionContextHelper.g.h"
+#include "Composition.Experimental.SystemCompositionContextHelper.g.h"
 
 #include <d2d1_1.h>
 #include <windows.ui.composition.interop.h>
 #include <winrt/Windows.UI.Composition.h>
 #include "CompositionHelpers.h"
 
-namespace winrt::Microsoft::ReactNative::Composition {
+namespace winrt::Microsoft::ReactNative::Composition::Experimental {
 #ifdef USE_WINUI3
 using CompositionContextHelper = MicrosoftCompositionContextHelper;
 #else
 using CompositionContextHelper = SystemCompositionContextHelper;
 #endif
-} // namespace winrt::Microsoft::ReactNative::Composition
+} // namespace winrt::Microsoft::ReactNative::Composition::Experimental
 
-namespace winrt::Microsoft::ReactNative::Composition::implementation {
+namespace winrt::Microsoft::ReactNative::Composition::Experimental::implementation {
 
 struct SystemCompositionContextHelper : SystemCompositionContextHelperT<SystemCompositionContextHelper> {
   SystemCompositionContextHelper() = default;
@@ -48,9 +48,9 @@ struct MicrosoftCompositionContextHelper : MicrosoftCompositionContextHelperT<Mi
 };
 #endif
 
-} // namespace winrt::Microsoft::ReactNative::Composition::implementation
+} // namespace winrt::Microsoft::ReactNative::Composition::Experimental::implementation
 
-namespace winrt::Microsoft::ReactNative::Composition::factory_implementation {
+namespace winrt::Microsoft::ReactNative::Composition::Experimental::factory_implementation {
 
 struct SystemCompositionContextHelper
     : SystemCompositionContextHelperT<SystemCompositionContextHelper, implementation::SystemCompositionContextHelper> {
@@ -62,4 +62,4 @@ struct MicrosoftCompositionContextHelper : MicrosoftCompositionContextHelperT<
                                                implementation::MicrosoftCompositionContextHelper> {};
 #endif
 
-} // namespace winrt::Microsoft::ReactNative::Composition::factory_implementation
+} // namespace winrt::Microsoft::ReactNative::Composition::Experimental::factory_implementation

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

@@ -1,16 +1,16 @@
 
 #include "pch.h"
 #include "CompositionContextHelper.h"
-#if __has_include("Composition.SystemCompositionContextHelper.g.cpp")
-#include "Composition.SystemCompositionContextHelper.g.cpp"
+#if __has_include("Composition.Experimental.SystemCompositionContextHelper.g.cpp")
+#include "Composition.Experimental.SystemCompositionContextHelper.g.cpp"
 #endif
 #ifdef USE_WINUI3
-#if __has_include("Composition.MicrosoftCompositionContextHelper.g.cpp")
-#include "Composition.MicrosoftCompositionContextHelper.g.cpp"
+#if __has_include("Composition.Experimental.MicrosoftCompositionContextHelper.g.cpp")
+#include "Composition.Experimental.MicrosoftCompositionContextHelper.g.cpp"
 #endif
 #endif
 
-namespace winrt::Microsoft::ReactNative::Composition::implementation {
+namespace winrt::Microsoft::ReactNative::Composition::Experimental::implementation {
 
 ICompositionContext SystemCompositionContextHelper::CreateContext(
     winrt::Windows::UI::Composition::Compositor const &) noexcept {
@@ -45,35 +45,35 @@ winrt::Windows::UI::Composition::ICompositionSurface SystemCompositionContextHel
 
 #ifdef USE_WINUI3
 ICompositionContext MicrosoftCompositionContextHelper::CreateContext(
-    winrt::Windows::UI::Composition::Compositor const &) noexcept {
+    winrt::Microsoft::UI::Composition::Compositor const &) noexcept {
   return nullptr;
 }
 
-IVisual MicrosoftCompositionContextHelper::CreateVisual(winrt::Windows::UI::Composition::Visual const &) noexcept {
+IVisual MicrosoftCompositionContextHelper::CreateVisual(winrt::Microsoft::UI::Composition::Visual const &) noexcept {
   return nullptr;
 }
 
-winrt::Windows::UI::Composition::Compositor MicrosoftCompositionContextHelper::InnerCompositor(
+winrt::Microsoft::UI::Composition::Compositor MicrosoftCompositionContextHelper::InnerCompositor(
     ICompositionContext) noexcept {
   return nullptr;
 }
 
-winrt::Windows::UI::Composition::Visual MicrosoftCompositionContextHelper::InnerVisual(IVisual) noexcept {
+winrt::Microsoft::UI::Composition::Visual MicrosoftCompositionContextHelper::InnerVisual(IVisual) noexcept {
   return nullptr;
 }
 
-winrt::Windows::UI::Composition::DropShadow MicrosoftCompositionContextHelper::InnerDropShadow(IDropShadow) noexcept {
+winrt::Microsoft::UI::Composition::DropShadow MicrosoftCompositionContextHelper::InnerDropShadow(IDropShadow) noexcept {
   return nullptr;
 }
 
-winrt::Windows::UI::Composition::CompositionBrush MicrosoftCompositionContextHelper::InnerBrush(IBrush) noexcept {
+winrt::Microsoft::UI::Composition::CompositionBrush MicrosoftCompositionContextHelper::InnerBrush(IBrush) noexcept {
   return nullptr;
 }
 
-winrt::Windows::UI::Composition::ICompositionSurface MicrosoftCompositionContextHelper::InnerSurface(
+winrt::Microsoft::UI::Composition::ICompositionSurface MicrosoftCompositionContextHelper::InnerSurface(
     IDrawingSurfaceBrush) noexcept {
   return nullptr;
 }
 #endif
 
-} // namespace winrt::Microsoft::ReactNative::Composition::implementation
+} // namespace winrt::Microsoft::ReactNative::Composition::Experimental::implementation

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

@@ -4,7 +4,7 @@
 
 #pragma once
 
-#include <CompositionSwitcher.interop.h>
+#include <CompositionSwitcher.Experimental.interop.h>
 #include <guid/msoGuid.h>
 #include <winrt/Windows.UI.Composition.h>
 

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

@@ -14,6 +14,7 @@
 #include "CompositionContextHelper.h"
 #include "ReactNativeHost.h"
 
+#include <winrt/Microsoft.ReactNative.Composition.Experimental.h>
 #include "CompositionRootAutomationProvider.h"
 #include "CompositionRootView.h"
 
@@ -35,19 +36,16 @@ void CompositionHwndHost::Initialize(uint64_t hwnd) noexcept {
       winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositionContext(
           ReactViewHost().ReactNativeHost().InstanceSettings().Properties());
 #if USE_WINUI3
-  if (auto liftedCompositor = winrt::Microsoft::ReactNative::Composition::implementation::
-          MicrosoftCompositionContextHelper::InnerCompositor(compositionContext)) {
+  if (auto liftedCompositor =
+          winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerCompositor(
+              compositionContext)) {
     m_compRootView = winrt::Microsoft::ReactNative::CompositionRootView(liftedCompositor);
-    m_compRootView.SetWindow(reinterpret_cast<uint64_t>(m_hwnd));
 
     auto bridge = winrt::Microsoft::UI::Content::DesktopChildSiteBridge::Create(
         liftedCompositor, winrt::Microsoft::UI::GetWindowIdFromWindow(m_hwnd));
 
     auto island = m_compRootView.Island();
 
-    auto invScale = 1.0f / ScaleFactor();
-    m_compRootView.RootVisual().Scale({invScale, invScale, invScale});
-
     bridge.Connect(island);
     bridge.Show();
 
@@ -55,11 +53,12 @@ void CompositionHwndHost::Initialize(uint64_t hwnd) noexcept {
     bridge.ResizePolicy(winrt::Microsoft::UI::Content::ContentSizePolicy::ResizeContentToParentWindow);
   } else {
     m_compRootView = winrt::Microsoft::ReactNative::CompositionRootView();
-    m_compRootView.SetWindow(reinterpret_cast<uint64_t>(m_hwnd));
+    m_compRootView.as<winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCompositionRootView>()
+        .SetWindow(reinterpret_cast<uint64_t>(m_hwnd));
 
 #endif
     auto compositor =
-        winrt::Microsoft::ReactNative::Composition::implementation::SystemCompositionContextHelper::InnerCompositor(
+        winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::InnerCompositor(
             compositionContext);
     auto interop = compositor.as<ABI::Windows::UI::Composition::Desktop::ICompositorDesktopInterop>();
     winrt::Windows::UI::Composition::Desktop::DesktopWindowTarget target{nullptr};
@@ -74,8 +73,10 @@ void CompositionHwndHost::Initialize(uint64_t hwnd) noexcept {
     root.Comment(L"Root Visual");
     target.Root(root);
 
-    m_compRootView.RootVisual(
-        winrt::Microsoft::ReactNative::Composition::SystemCompositionContextHelper::CreateVisual(target.Root()));
+    m_compRootView.as<winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCompositionRootView>()
+        .InternalRootVisual(
+            winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::CreateVisual(
+                target.Root()));
 
 #if USE_WINUI3
   }
@@ -122,7 +123,9 @@ LRESULT CompositionHwndHost::TranslateMessage(int msg, uint64_t wParam, int64_t
 #if USE_WINUI3
     if (!m_compRootView.Island()) // When using Island hosting we dont need to forward window messages
 #endif
-      return static_cast<LRESULT>(m_compRootView.SendMessage(msg, wParam, lParam));
+      return static_cast<LRESULT>(
+          m_compRootView.as<winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCompositionRootView>()
+              .SendMessage(msg, wParam, lParam));
   }
   return 0;
 }

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

@@ -33,6 +33,7 @@
 
 #ifdef USE_WINUI3
 #include <winrt/Microsoft.UI.Content.h>
+#include <winrt/Microsoft.UI.Input.h>
 #endif
 
 namespace winrt::Microsoft::ReactNative::implementation {
@@ -126,7 +127,7 @@ inline Mso::Future<void> CompositionReactViewInstance::PostInUIQueue(TAction &&a
 CompositionRootView::CompositionRootView() noexcept {}
 
 #ifdef USE_WINUI3
-CompositionRootView::CompositionRootView(winrt::Microsoft::UI::Composition::Compositor compositor) noexcept
+CompositionRootView::CompositionRootView(const winrt::Microsoft::UI::Composition::Compositor &compositor) noexcept
     : m_compositor(compositor) {}
 #endif
 
@@ -151,11 +152,17 @@ void CompositionRootView::ReactViewHost(winrt::Microsoft::ReactNative::IReactVie
   }
 }
 
-winrt::Microsoft::ReactNative::Composition::IVisual CompositionRootView::RootVisual() noexcept {
+winrt::Microsoft::UI::Composition::Visual CompositionRootView::RootVisual() noexcept {
+  return winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerVisual(
+      m_rootVisual);
+}
+
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual CompositionRootView::InternalRootVisual() noexcept {
   return m_rootVisual;
 }
 
-void CompositionRootView::RootVisual(winrt::Microsoft::ReactNative::Composition::IVisual const &value) noexcept {
+void CompositionRootView::InternalRootVisual(
+    winrt::Microsoft::ReactNative::Composition::Experimental::IVisual const &value) noexcept {
   if (m_rootVisual != value) {
     assert(!m_rootVisual);
     m_rootVisual = value;
@@ -164,19 +171,29 @@ void CompositionRootView::RootVisual(winrt::Microsoft::ReactNative::Composition:
 }
 
 void CompositionRootView::AddRenderedVisual(
-    const winrt::Microsoft::ReactNative::Composition::IVisual &visual) noexcept {
+    const winrt::Microsoft::ReactNative::Composition::Experimental::IVisual &visual) noexcept {
   assert(!m_hasRenderedVisual);
-  RootVisual().InsertAt(visual, 0);
+  InternalRootVisual().InsertAt(visual, 0);
   m_hasRenderedVisual = true;
 }
 
 void CompositionRootView::RemoveRenderedVisual(
-    const winrt::Microsoft::ReactNative::Composition::IVisual &visual) noexcept {
+    const winrt::Microsoft::ReactNative::Composition::Experimental::IVisual &visual) noexcept {
   assert(m_hasRenderedVisual);
-  RootVisual().Remove(visual);
+  InternalRootVisual().Remove(visual);
   m_hasRenderedVisual = false;
 }
 
+bool CompositionRootView::TrySetFocus() noexcept {
+#ifdef USE_WINUI3
+  if (m_island) {
+    auto focusController = winrt::Microsoft::UI::Input::InputFocusController::GetForIsland(m_island);
+    return focusController.TrySetFocus();
+  }
+#endif
+  return false;
+}
+
 winrt::Windows::Foundation::Size CompositionRootView::Size() noexcept {
   return m_size;
 }
@@ -214,6 +231,11 @@ float CompositionRootView::ScaleFactor() noexcept {
 void CompositionRootView::ScaleFactor(float value) noexcept {
   if (m_scaleFactor != value) {
     m_scaleFactor = value;
+    // Lifted ContentIslands apply a scale that we need to reverse
+    if (auto rootView = RootVisual()) {
+      auto invScale = 1.0f / value;
+      rootView.Scale({invScale, invScale, invScale});
+    }
     UpdateRootVisualSize();
   }
 }
@@ -430,7 +452,7 @@ void CompositionRootView::ClearLoadingUI() noexcept {
   if (!m_loadingVisual)
     return;
 
-  RootVisual().Remove(m_loadingVisual);
+  InternalRootVisual().Remove(m_loadingVisual);
 
   m_loadingVisual = nullptr;
   m_loadingActivityVisual = nullptr;
@@ -462,7 +484,7 @@ void CompositionRootView::ShowInstanceError() noexcept {
   ClearLoadingUI();
 }
 
-Composition::IDrawingSurfaceBrush CompositionRootView::CreateLoadingVisualBrush() noexcept {
+Composition::Experimental::IDrawingSurfaceBrush CompositionRootView::CreateLoadingVisualBrush() noexcept {
   auto compContext =
       winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositionContext(
           m_context.Properties().Handle());
@@ -476,7 +498,7 @@ Composition::IDrawingSurfaceBrush CompositionRootView::CreateLoadingVisualBrush(
 
   POINT offset;
   {
-    ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(drawingSurface, &offset);
+    ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(drawingSurface, m_scaleFactor, &offset);
     if (auto d2dDeviceContext = autoDraw.GetRenderTarget()) {
       d2dDeviceContext->Clear(D2D1::ColorF(D2D1::ColorF::Green));
 
@@ -543,7 +565,7 @@ void CompositionRootView::ShowInstanceLoading() noexcept {
 
   UpdateLoadingVisualSize();
 
-  RootVisual().InsertAt(m_loadingVisual, m_hasRenderedVisual ? 1 : 0);
+  InternalRootVisual().InsertAt(m_loadingVisual, m_hasRenderedVisual ? 1 : 0);
 }
 
 winrt::Windows::Foundation::Size CompositionRootView::Measure(
@@ -617,7 +639,9 @@ winrt::Microsoft::UI::Content::ContentIsland CompositionRootView::Island() noexc
   if (!m_island) {
     auto rootVisual = m_compositor.CreateSpriteVisual();
 
-    RootVisual(winrt::Microsoft::ReactNative::Composition::MicrosoftCompositionContextHelper::CreateVisual(rootVisual));
+    InternalRootVisual(
+        winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::CreateVisual(
+            rootVisual));
     m_island = winrt::Microsoft::UI::Content::ContentIsland::Create(rootVisual);
 
     m_island.AutomationProviderRequested(

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

@@ -7,6 +7,7 @@
 #include <FocusNavigationResult.g.h>
 
 #include <ReactContext.h>
+#include <winrt/Microsoft.ReactNative.Composition.Experimental.h>
 #include <winrt/Microsoft.ReactNative.h>
 #include "CompositionEventHandler.h"
 #include "ReactHost/React.h"
@@ -40,11 +41,13 @@ struct FocusNavigationResult : FocusNavigationResultT<FocusNavigationResult> {
   const bool m_wasFocusMoved;
 };
 
-struct CompositionRootView : CompositionRootViewT<CompositionRootView>, ::Microsoft::ReactNative::ICompositionRootView {
+struct CompositionRootView
+    : CompositionRootViewT<CompositionRootView, Composition::Experimental::IInternalCompositionRootView>,
+      ::Microsoft::ReactNative::ICompositionRootView {
   CompositionRootView() noexcept;
 
 #ifdef USE_WINUI3
-  CompositionRootView(winrt::Microsoft::UI::Composition::Compositor compositor) noexcept;
+  CompositionRootView(const winrt::Microsoft::UI::Composition::Compositor &compositor) noexcept;
   winrt::Microsoft::UI::Content::ContentIsland Island() noexcept;
 #endif
 
@@ -52,9 +55,11 @@ struct CompositionRootView : CompositionRootViewT<CompositionRootView>, ::Micros
   ReactNative::IReactViewHost ReactViewHost() noexcept;
   void ReactViewHost(ReactNative::IReactViewHost const &value) noexcept;
 
+  winrt::Microsoft::UI::Composition::Visual RootVisual() noexcept;
+
   // property RootVisual
-  winrt::Microsoft::ReactNative::Composition::IVisual RootVisual() noexcept;
-  void RootVisual(winrt::Microsoft::ReactNative::Composition::IVisual const &value) noexcept;
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual InternalRootVisual() noexcept;
+  void InternalRootVisual(winrt::Microsoft::ReactNative::Composition::Experimental::IVisual const &value) noexcept;
 
   // property Size
   winrt::Windows::Foundation::Size Size() noexcept;
@@ -64,8 +69,9 @@ struct CompositionRootView : CompositionRootViewT<CompositionRootView>, ::Micros
   float ScaleFactor() noexcept;
   void ScaleFactor(float value) noexcept;
 
-  void AddRenderedVisual(const winrt::Microsoft::ReactNative::Composition::IVisual &visual) noexcept;
-  void RemoveRenderedVisual(const winrt::Microsoft::ReactNative::Composition::IVisual &visual) noexcept;
+  void AddRenderedVisual(const winrt::Microsoft::ReactNative::Composition::Experimental::IVisual &visual) noexcept;
+  void RemoveRenderedVisual(const winrt::Microsoft::ReactNative::Composition::Experimental::IVisual &visual) noexcept;
+  bool TrySetFocus() noexcept;
 
   winrt::Microsoft::ReactNative::Composition::Theme Theme() noexcept;
   void Theme(const winrt::Microsoft::ReactNative::Composition::Theme &value) noexcept;
@@ -125,9 +131,9 @@ struct CompositionRootView : CompositionRootViewT<CompositionRootView>, ::Micros
   winrt::Microsoft::ReactNative::IReactViewHost m_reactViewHost;
   winrt::Microsoft::ReactNative::ReactViewOptions m_reactViewOptions;
   std::shared_ptr<::Microsoft::ReactNative::CompositionEventHandler> m_CompositionEventHandler;
-  winrt::Microsoft::ReactNative::Composition::IVisual m_rootVisual{nullptr};
-  winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_loadingVisual{nullptr};
-  winrt::Microsoft::ReactNative::Composition::IActivityVisual m_loadingActivityVisual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_rootVisual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_loadingVisual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::IActivityVisual m_loadingActivityVisual{nullptr};
   winrt::Microsoft::ReactNative::Composition::Theme m_theme{nullptr};
   winrt::Microsoft::ReactNative::ReactNotificationSubscription m_themeChangedSubscription{nullptr};
   winrt::Microsoft::ReactNative::Composition::Theme::ThemeChanged_revoker m_themeChangedRevoker;
@@ -140,7 +146,7 @@ struct CompositionRootView : CompositionRootViewT<CompositionRootView>, ::Micros
   void ShowInstanceLoading() noexcept;
   void UpdateRootVisualSize() noexcept;
   void UpdateLoadingVisualSize() noexcept;
-  Composition::IDrawingSurfaceBrush CreateLoadingVisualBrush() noexcept;
+  Composition::Experimental::IDrawingSurfaceBrush CreateLoadingVisualBrush() noexcept;
 };
 
 } // namespace winrt::Microsoft::ReactNative::implementation

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

@@ -29,17 +29,28 @@ struct CompositionReactViewInstance
 
 CompositionRootView::CompositionRootView() noexcept {}
 
+CompositionRootView::CompositionRootView(const winrt::Microsoft::UI::Composition::Compositor &compositor) noexcept {}
+
 ReactNative::IReactViewHost CompositionRootView::ReactViewHost() noexcept {
   return nullptr;
 }
 
 void CompositionRootView::ReactViewHost(winrt::Microsoft::ReactNative::IReactViewHost const &) noexcept {}
 
-winrt::Microsoft::ReactNative::Composition::IVisual CompositionRootView::RootVisual() noexcept {
+winrt::Microsoft::UI::Composition::Visual CompositionRootView::RootVisual() noexcept {
+  return nullptr;
+}
+
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual CompositionRootView::InternalRootVisual() noexcept {
   return nullptr;
 }
 
-void CompositionRootView::RootVisual(winrt::Microsoft::ReactNative::Composition::IVisual const &) noexcept {}
+void CompositionRootView::InternalRootVisual(
+    const winrt::Microsoft::ReactNative::Composition::Experimental::IVisual &) noexcept {}
+
+winrt::Microsoft::UI::Content::ContentIsland CompositionRootView::Island() noexcept {
+  return nullptr;
+}
 
 winrt::Windows::Foundation::Size CompositionRootView::Size() noexcept {
   return {};
@@ -106,11 +117,11 @@ void CompositionRootView::ShowInstanceError() noexcept {}
 
 void CompositionRootView::ShowInstanceLoading() noexcept {}
 
-Windows::Foundation::Size CompositionRootView::Measure(Windows::Foundation::Size const &) const {
+winrt::Windows::Foundation::Size CompositionRootView::Measure(winrt::Windows::Foundation::Size const &) const {
   return {};
 }
 
-Windows::Foundation::Size CompositionRootView::Arrange(Windows::Foundation::Size) const {
+winrt::Windows::Foundation::Size CompositionRootView::Arrange(winrt::Windows::Foundation::Size) const {
   return {};
 }
 

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

@@ -10,21 +10,32 @@
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
-static const ReactPropertyId<ICompositionContext> &CompositionContextPropertyId() noexcept {
-  static const ReactPropertyId<ICompositionContext> prop{L"ReactNative.Composition", L"CompositionContext"};
+static const ReactPropertyId<Experimental::ICompositionContext> &CompositionContextPropertyId() noexcept {
+  static const ReactPropertyId<Experimental::ICompositionContext> prop{
+      L"ReactNative.Composition", L"CompositionContext"};
   return prop;
 }
 
-void CompositionUIService::SetCompositionContext(
-    IReactPropertyBag const &properties,
-    ICompositionContext const &compositionContext) noexcept {
-  ReactPropertyBag(properties).Set(CompositionContextPropertyId(), compositionContext);
+void CompositionUIService::SetCompositor(
+    const winrt::Microsoft::ReactNative::ReactInstanceSettings &settings,
+    const winrt::Microsoft::UI::Composition::Compositor &compositor) noexcept {
+  ReactPropertyBag properties(settings.Properties());
+  properties.Set(
+      CompositionContextPropertyId(),
+      winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::CreateContext(
+          compositor));
   // Default to using Bridgeless mode when using fabric
-  winrt::Microsoft::ReactNative::implementation::QuirkSettings::SetIsBridgeless(
-      ReactPropertyBag(properties), !!compositionContext);
+  winrt::Microsoft::ReactNative::implementation::QuirkSettings::SetIsBridgeless(properties, !!compositor);
 }
 
-ICompositionContext CompositionUIService::GetCompositionContext(const IReactPropertyBag &properties) noexcept {
+winrt::Microsoft::UI::Composition::Compositor CompositionUIService::GetCompositor(
+    const IReactPropertyBag &properties) noexcept {
+  return winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerCompositor(
+      GetCompositionContext(properties));
+}
+
+Experimental::ICompositionContext CompositionUIService::GetCompositionContext(
+    const IReactPropertyBag &properties) noexcept {
   return ReactPropertyBag(properties).Get(CompositionContextPropertyId());
 }
 

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

@@ -3,17 +3,19 @@
 
 #pragma once
 #include "Composition.CompositionUIService.g.h"
+#include <winrt/Microsoft.ReactNative.Composition.Experimental.h>
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 struct CompositionUIService : CompositionUIServiceT<CompositionUIService> {
   CompositionUIService() = default;
 
-  static void SetCompositionContext(
-      const IReactPropertyBag &properties,
-      const ICompositionContext &compositionContext) noexcept;
+  static void SetCompositor(
+      const winrt::Microsoft::ReactNative::ReactInstanceSettings &settings,
+      const winrt::Microsoft::UI::Composition::Compositor &compositor) noexcept;
+  static winrt::Microsoft::UI::Composition::Compositor GetCompositor(const IReactPropertyBag &properties) noexcept;
 
-  static ICompositionContext GetCompositionContext(const IReactPropertyBag &properties) noexcept;
+  static Experimental::ICompositionContext GetCompositionContext(const IReactPropertyBag &properties) noexcept;
 };
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -6,12 +6,15 @@
 #include "CompositionUIService.h"
 
 #include "Composition.CompositionUIService.g.cpp"
+#include <winrt/Microsoft.UI.Composition.h>
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
-void CompositionUIService::SetCompositionContext(IReactPropertyBag const &, ICompositionContext const &) noexcept {}
+void CompositionUIService::SetCompositor(
+    ReactInstanceSettings const &,
+    winrt::Microsoft::UI::Composition::Compositor const &) noexcept {}
 
-ICompositionContext CompositionUIService::GetCompositionContext(const IReactPropertyBag &) noexcept {
+winrt::Microsoft::UI::Composition::Compositor CompositionUIService::GetCompositor(const IReactPropertyBag &) noexcept {
   return nullptr;
 }