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

package/Libraries/Core/ReactNativeVersion.js

@@ -17,7 +17,7 @@ const version: $ReadOnly<{
   major: 0,
   minor: 74,
   patch: 0,
-  prerelease: 'rc.6',
+  prerelease: 'rc.9',
 };
 
 module.exports = {version};

package/Libraries/Image/AssetSourceResolver.windows.js

@@ -0,0 +1,186 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+export type ResolvedAssetSource = {|
+  +__packager_asset: boolean,
+  +width: ?number,
+  +height: ?number,
+  +uri: string,
+  +scale: number,
+|};
+
+import type {PackagerAsset} from '@react-native/assets-registry/registry';
+
+const PixelRatio = require('../Utilities/PixelRatio').default;
+const Platform = require('../Utilities/Platform');
+const {pickScale} = require('./AssetUtils');
+const {
+  getAndroidResourceFolderName,
+  getAndroidResourceIdentifier,
+} = require('@react-native/assets-registry/path-support');
+const invariant = require('invariant');
+// $FlowFixMe[untyped-import]
+const ensureShortPath = require('./assetPaths.js'); // [Windows]
+
+// [Windows - instead of using basePath from @react-native/assets-registry/path-support]
+function getBasePath(asset: PackagerAsset, local: boolean) {
+  let basePath = asset.httpServerLocation;
+  if (basePath[0] === '/') {
+    basePath = basePath.substr(1);
+  }
+
+  if (local) {
+    const safePath = basePath.replace(/\.\.\//g, '_');
+    // If this asset was created with saveAssetPlugin, then we should shorten the path
+    // This conditional allow compat of bundles which might have been created without the saveAssetPlugin
+    // $FlowFixMe: __useShortPath not part of public type
+    if (asset.__useShortPath) {
+      return ensureShortPath(safePath);
+    }
+    return safePath;
+  }
+
+  return basePath;
+}
+
+/**
+ * Returns a path like 'assets/AwesomeModule/icon@2x.png'
+ */
+function getScaledAssetPath(asset: PackagerAsset, local: boolean): string {
+  const scale = pickScale(asset.scales, PixelRatio.get());
+  const scaleSuffix = scale === 1 ? '' : '@' + scale + 'x';
+  const assetDir = getBasePath(asset, local);
+  return assetDir + '/' + asset.name + scaleSuffix + '.' + asset.type;
+}
+
+/**
+ * Returns a path like 'drawable-mdpi/icon.png'
+ */
+function getAssetPathInDrawableFolder(asset: PackagerAsset): string {
+  const scale = pickScale(asset.scales, PixelRatio.get());
+  const drawableFolder = getAndroidResourceFolderName(asset, scale);
+  const fileName = getAndroidResourceIdentifier(asset);
+  return drawableFolder + '/' + fileName + '.' + asset.type;
+}
+
+class AssetSourceResolver {
+  serverUrl: ?string;
+  // where the jsbundle is being run from
+  jsbundleUrl: ?string;
+  // the asset to resolve
+  asset: PackagerAsset;
+
+  constructor(serverUrl: ?string, jsbundleUrl: ?string, asset: PackagerAsset) {
+    this.serverUrl = serverUrl;
+    this.jsbundleUrl = jsbundleUrl;
+    this.asset = asset;
+  }
+
+  isLoadedFromServer(): boolean {
+    return !!this.serverUrl;
+  }
+
+  isLoadedFromFileSystem(): boolean {
+    return this.jsbundleUrl != null && this.jsbundleUrl?.startsWith('file://');
+  }
+
+  defaultAsset(): ResolvedAssetSource {
+    if (this.isLoadedFromServer()) {
+      return this.assetServerURL();
+    }
+
+    if (Platform.OS === 'android') {
+      return this.isLoadedFromFileSystem()
+        ? this.drawableFolderInBundle()
+        : this.resourceIdentifierWithoutScale();
+    } else {
+      return this.scaledAssetURLNearBundle();
+    }
+  }
+
+  /**
+   * Returns an absolute URL which can be used to fetch the asset
+   * from the devserver
+   */
+  assetServerURL(): ResolvedAssetSource {
+    invariant(this.serverUrl != null, 'need server to load from');
+    return this.fromSource(
+      this.serverUrl +
+        getScaledAssetPath(this.asset, false) +
+        '?platform=' +
+        Platform.OS +
+        '&hash=' +
+        this.asset.hash,
+    );
+  }
+
+  /**
+   * Resolves to just the scaled asset filename
+   * E.g. 'assets/AwesomeModule/icon@2x.png'
+   */
+  scaledAssetPath(local: boolean): ResolvedAssetSource {
+    return this.fromSource(getScaledAssetPath(this.asset, local));
+  }
+
+  /**
+   * Resolves to where the bundle is running from, with a scaled asset filename
+   * E.g. 'file:///sdcard/bundle/assets/AwesomeModule/icon@2x.png'
+   */
+  scaledAssetURLNearBundle(): ResolvedAssetSource {
+    const path = this.jsbundleUrl ?? 'file://';
+    return this.fromSource(
+      // Assets can have relative paths outside of the project root.
+      // When bundling them we replace `../` with `_` to make sure they
+      // don't end up outside of the expected assets directory.
+      path + getScaledAssetPath(this.asset, true).replace(/\.\.\//g, '_'),
+    );
+  }
+
+  /**
+   * The default location of assets bundled with the app, located by
+   * resource identifier
+   * The Android resource system picks the correct scale.
+   * E.g. 'assets_awesomemodule_icon'
+   */
+  resourceIdentifierWithoutScale(): ResolvedAssetSource {
+    invariant(
+      Platform.OS === 'android',
+      'resource identifiers work on Android',
+    );
+    return this.fromSource(getAndroidResourceIdentifier(this.asset));
+  }
+
+  /**
+   * If the jsbundle is running from a sideload location, this resolves assets
+   * relative to its location
+   * E.g. 'file:///sdcard/AwesomeModule/drawable-mdpi/icon.png'
+   */
+  drawableFolderInBundle(): ResolvedAssetSource {
+    const path = this.jsbundleUrl ?? 'file://';
+    return this.fromSource(path + getAssetPathInDrawableFolder(this.asset));
+  }
+
+  fromSource(source: string): ResolvedAssetSource {
+    return {
+      __packager_asset: true,
+      width: this.asset.width,
+      height: this.asset.height,
+      uri: source,
+      scale: pickScale(this.asset.scales, PixelRatio.get()),
+    };
+  }
+
+  static pickScale: (scales: Array<number>, deviceScale?: number) => number =
+    pickScale;
+}
+
+module.exports = AssetSourceResolver;

package/Libraries/Image/assetPaths.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * Dont use flow here, since this file is used by saveAssetPlugin.js which will run without flow transform
+ * @format
+ */
+
+'use strict';
+
+// Some windows machines may not have long paths enabled
+// https://learn.microsoft.com/en-us/windows/win32/fileio/maximum-file-path-limitation
+// Assets in nested node_modules (common when using pnpm) - end up creating very long paths
+// Using this function we shorten longer paths to prevent paths from hitting the path limit
+function ensureShortPath(str) {
+  if (str.length < 40) return str;
+
+  const assetsPrefix = 'assets/';
+
+  if (!str.startsWith(assetsPrefix)) {
+    console.warn(`Unexpected asset uri - ${str} may not load correctly.`);
+  }
+
+  const postStr = str.slice(assetsPrefix.length);
+  var hash = 0,
+    i,
+    chr;
+  for (i = 0; i < postStr.length; i++) {
+    chr = postStr.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return assetsPrefix + hash.toString();
+}
+
+module.exports = ensureShortPath;

package/Microsoft.ReactNative/CompositionComponentView.idl

@@ -6,6 +6,7 @@ import "Theme.idl";
 import "ViewProps.idl";
 import "Composition.Input.idl";
 import "CompositionSwitcher.idl";
+import "IReactContext.idl";
 
 #include "DocString.h"
 
@@ -28,7 +29,7 @@ namespace Microsoft.ReactNative.Composition
   [experimental]
   [webhosthidden]
   runtimeclass CreateCompositionComponentViewArgs : Microsoft.ReactNative.CreateComponentViewArgs {
-    ICompositionContext CompositionContext { get; };
+    Microsoft.UI.Composition.Compositor Compositor { get; };
     ComponentViewFeatures Features;
   };
 
@@ -37,13 +38,27 @@ namespace Microsoft.ReactNative.Composition
   unsealed runtimeclass ComponentView : Microsoft.ReactNative.ComponentView {
     ComponentView(CreateCompositionComponentViewArgs args);
 
-    ICompositionContext CompositionContext { get; };
+    Microsoft.UI.Composition.Compositor Compositor { get; };
     Theme Theme;
     overridable void OnThemeChanged();
     Boolean CapturePointer(Microsoft.ReactNative.Composition.Input.Pointer pointer);
     void ReleasePointerCapture(Microsoft.ReactNative.Composition.Input.Pointer pointer);
   };
 
+  namespace Experimental {
+    [webhosthidden]
+    [experimental]
+    DOC_STRING("Custom ViewComponents need to implement this interface to be able to provide a custom"
+    " visual using the composition context that allows custom compositors. This is only required for"
+    " custom components that need to support running in RNW instances with custom compositors. Most"
+    " custom components can just override CreateVisual on ViewComponentView."
+    " This will be removed in a future version")
+    interface IInternalCreateVisual
+    {
+      Microsoft.ReactNative.Composition.Experimental.IVisual CreateInternalVisual();
+    }
+  }
+
   [experimental]
   [webhosthidden]
   unsealed runtimeclass ViewComponentView : ComponentView {
@@ -51,7 +66,7 @@ namespace Microsoft.ReactNative.Composition
 
     Microsoft.ReactNative.ViewProps ViewProps { get; };
 
-    overridable IVisual CreateVisual();
+    overridable Microsoft.UI.Composition.Visual CreateVisual();
   };
 
   [experimental]

package/Microsoft.ReactNative/CompositionContext.idl

@@ -5,17 +5,17 @@
 #include "DocString.h"
 import "CompositionSwitcher.idl";
 
-namespace Microsoft.ReactNative.Composition
+namespace Microsoft.ReactNative.Composition.Experimental
 {
   [webhosthidden]
   [default_interface]
   [experimental]
-  DOC_STRING("A helper static class for to create a @ICompositionContext based on Windows.Composition Visuals.  And to access the underlying Windows.Composition objects from the abstraction.")
+  DOC_STRING("A helper static class to create a @ICompositionContext based on Windows.Composition Visuals. This is not for general consumption and is expected to be removed in a future release.")
   static runtimeclass SystemCompositionContextHelper
   {
     DOC_STRING(
       "Creates a @ICompositionContext from a Compositor")
-    static ICompositionContext CreateContext(Windows.UI.Composition.Compositor compositor);
+    static Microsoft.ReactNative.Composition.Experimental.ICompositionContext CreateContext(Windows.UI.Composition.Compositor compositor);
 
     DOC_STRING(
       "Creates a @IVisual from a Visual")
@@ -32,12 +32,12 @@ namespace Microsoft.ReactNative.Composition
   [webhosthidden]
   [default_interface]
   [experimental]
-  DOC_STRING("A helper static class for to create a @ICompositionContext based on Microsoft.Composition Visuals.  And to access the underlying Microsoft.Composition objects from the abstraction.")
+  DOC_STRING("A helper static class to create a @ICompositionContext based on Microsoft.Composition Visuals. Generally it should not be required to call this directly. Instead you should call @CompositionUIService.SetCompositor. This is not for general consumption and is expected to be removed in a future release.")
   static runtimeclass MicrosoftCompositionContextHelper
   {
     DOC_STRING(
       "Creates a @ICompositionContext from a Compositor")
-    static ICompositionContext CreateContext(Microsoft.UI.Composition.Compositor compositor);
+    static Microsoft.ReactNative.Composition.Experimental.ICompositionContext CreateContext(Microsoft.UI.Composition.Compositor compositor);
 
     DOC_STRING(
       "Creates a @IVisual from a Visual")

package/Microsoft.ReactNative/CompositionRootView.idl

@@ -1,7 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import "CompositionContext.idl";
 import "IJSValueWriter.idl";
 import "ReactCoreInjection.idl";
 import "ReactNativeHost.idl";
@@ -41,6 +40,27 @@ namespace Microsoft.ReactNative
     Boolean WasFocusMoved {get;};
   };
 
+  namespace Composition.Experimental {
+  [webhosthidden]
+  [experimental]
+  DOC_STRING("Custom ViewComponents need to implement this interface to be able to provide a custom"
+  " visual using the composition context that allows custom compositors.  This is only required for"
+  " custom components that need to support running in RNW instances with custom compositors.  Most"
+  " custom components can just override CreateVisual on ViewComponentView. This interface will be removed"
+  " in future versions")
+  interface IInternalCompositionRootView
+  {
+    DOC_STRING("The RootVisual associated with the @CompositionRootView. It must be set to show any React UI elements.")
+    Microsoft.ReactNative.Composition.Experimental.IVisual InternalRootVisual { get; set; };
+    
+    DOC_STRING("Hosting Window that input is coming from. Only required when not using ContentIslands")
+    void SetWindow(UInt64 hwnd);
+
+    DOC_STRING("Forward input to the RootView. Only required when not using ContentIslands")
+    Int64 SendMessage(UInt32 Msg, UInt64 WParam, Int64 LParam);
+  }
+  }
+
   [default_interface]
   [webhosthidden]
   [experimental]
@@ -60,7 +80,7 @@ namespace Microsoft.ReactNative
     IReactViewHost ReactViewHost { get; set; };
 
     DOC_STRING("The RootVisual associated with the @CompositionRootView. It must be set to show any React UI elements.")
-    Microsoft.ReactNative.Composition.IVisual RootVisual { get; set; };
+    Microsoft.UI.Composition.Visual RootVisual { get; };
 
     Windows.Foundation.Size Size {get; set; };
 
@@ -73,12 +93,6 @@ namespace Microsoft.ReactNative
     Windows.Foundation.Size Measure(Windows.Foundation.Size availableSize);
     Windows.Foundation.Size Arrange(Windows.Foundation.Size availableSize);
 
-    DOC_STRING("Hosting Window that input is coming from. Only required when not using ContentIslands")
-    void SetWindow(UInt64 hwnd);
-
-    DOC_STRING("Forward input to the RootView. Only required when not using ContentIslands")
-    Int64 SendMessage(UInt32 Msg, UInt64 WParam, Int64 LParam);
-
     Object GetUiaProvider();
 
     DOC_STRING("Theme used for Platform colors within this RootView")

package/Microsoft.ReactNative/CompositionSwitcher.idl

@@ -4,7 +4,7 @@
 #include "NamespaceRedirect.h"
 #include "DocString.h"
 
-namespace Microsoft.ReactNative.Composition
+namespace Microsoft.ReactNative.Composition.Experimental
 {
   enum CompositionStretch
   {
@@ -161,4 +161,4 @@ namespace Microsoft.ReactNative.Composition
     // event Windows.Foundation.EventHandler<RenderingDeviceReplacedArgs> RenderingDeviceReplaced;
   }
 
-} // namespace Microsoft.ReactNative.Composition
+} // namespace Microsoft.ReactNative.Composition.Experimental

package/Microsoft.ReactNative/CompositionUIService.idl

@@ -1,11 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import "IReactContext.idl";
-import "IReactPropertyBag.idl";
-import "CompositionContext.idl";
+import "ReactInstanceSettings.idl";
 
-#include "NamespaceRedirect.h"
 #include "DocString.h"
 
 namespace Microsoft.ReactNative.Composition
@@ -18,7 +15,12 @@ namespace Microsoft.ReactNative.Composition
   runtimeclass CompositionUIService
   {
     DOC_STRING(
-      "Sets the CompositionContext for this react instance.  This can be created using @CompositionContextHelper.CreateContext")
-    static void SetCompositionContext(Microsoft.ReactNative.IReactPropertyBag properties, ICompositionContext compositionContext);
+      "Configures the react instance to use the provided Compositor. Setting this will opt into using the new architecture")
+    static void SetCompositor(Microsoft.ReactNative.ReactInstanceSettings settings, Microsoft.UI.Composition.Compositor compositor);
+
+    DOC_STRING(
+      "Gets the Compositor used by this ReactNative instance.")
+    static Microsoft.UI.Composition.Compositor GetCompositor(Microsoft.ReactNative.IReactPropertyBag properties);
+
   }
 } // namespace Microsoft.ReactNative.Composition

package/Microsoft.ReactNative/Fabric/AbiViewProps.cpp

@@ -51,7 +51,14 @@ winrt::Windows::UI::Color Color::AsWindowsColor(
     const winrt::Microsoft::ReactNative::Composition::Theme &theme) noexcept {
   return winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::Theme>(theme)->Color(*m_color);
 }
-winrt::Microsoft::ReactNative::Composition::IBrush Color::AsBrush(
+#ifdef USE_WINUI3
+winrt::Microsoft::UI::Composition::CompositionBrush Color::AsBrush(
+    const winrt::Microsoft::ReactNative::Composition::Theme theme) noexcept {
+  return winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerBrush(
+      winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::Theme>(theme)->Brush(*m_color));
+}
+#endif
+winrt::Microsoft::ReactNative::Composition::Experimental::IBrush Color::AsInternalBrush(
     const winrt::Microsoft::ReactNative::Composition::Theme theme) noexcept {
   return winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::Theme>(theme)->Brush(*m_color);
 }

package/Microsoft.ReactNative/Fabric/AbiViewProps.h

@@ -7,6 +7,7 @@
 #include "ViewProps.g.h"
 
 #include <react/renderer/components/view/ViewProps.h>
+#include "winrt/Microsoft.ReactNative.Composition.Experimental.h"
 #include "winrt/Microsoft.ReactNative.h"
 
 namespace Microsoft::ReactNative {
@@ -35,11 +36,15 @@ class AbiViewProps final : public facebook::react::ViewProps {
 
 namespace winrt::Microsoft::ReactNative::implementation {
 
-struct Color : ColorT<Color> {
+struct Color : ColorT<Color, Composition::Experimental::IInternalColor> {
   Color(facebook::react::SharedColor color);
 
   winrt::Windows::UI::Color AsWindowsColor(const winrt::Microsoft::ReactNative::Composition::Theme &theme) noexcept;
-  winrt::Microsoft::ReactNative::Composition::IBrush AsBrush(
+#ifdef USE_WINUI3
+  winrt::Microsoft::UI::Composition::CompositionBrush AsBrush(
+      const winrt::Microsoft::ReactNative::Composition::Theme theme) noexcept;
+#endif
+  winrt::Microsoft::ReactNative::Composition::Experimental::IBrush AsInternalBrush(
       const winrt::Microsoft::ReactNative::Composition::Theme theme) noexcept;
 
   static winrt::Microsoft::ReactNative::Color ReadValue(

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

@@ -14,14 +14,14 @@
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 winrt::Microsoft::ReactNative::ComponentView ActivityIndicatorComponentView::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<ActivityIndicatorComponentView>(compContext, tag, reactContext);
 }
 
 ActivityIndicatorComponentView::ActivityIndicatorComponentView(
-    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(compContext, tag, reactContext, ComponentViewFeatures::Default, false) {
@@ -141,7 +141,8 @@ facebook::react::Tag ActivityIndicatorComponentView::hitTest(
   return -1;
 }
 
-winrt::Microsoft::ReactNative::Composition::IVisual ActivityIndicatorComponentView::Visual() const noexcept {
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ActivityIndicatorComponentView::Visual()
+    const noexcept {
   return m_visual;
 }
 

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

@@ -17,7 +17,7 @@ struct ActivityIndicatorComponentView : ActivityIndicatorComponentViewT<Activity
   using Super = ActivityIndicatorComponentViewT<ActivityIndicatorComponentView, ComponentView>;
 
   [[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;
 
@@ -42,11 +42,11 @@ struct ActivityIndicatorComponentView : ActivityIndicatorComponentViewT<Activity
 
   facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt, bool ignorePointerEvents)
       const noexcept override;
-  winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept override;
   virtual std::string DefaultControlType() const noexcept;
 
   ActivityIndicatorComponentView(
-      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);
 
@@ -55,8 +55,8 @@ struct ActivityIndicatorComponentView : ActivityIndicatorComponentViewT<Activity
   void updateVisualSize() noexcept;
   void updateProgressColor(const facebook::react::SharedColor &color) noexcept;
 
-  winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual{nullptr};
-  winrt::Microsoft::ReactNative::Composition::IActivityVisual m_ActivityIndicatorVisual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::IActivityVisual m_ActivityIndicatorVisual{nullptr};
   facebook::react::SharedViewProps m_props;
 };
 

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

@@ -42,7 +42,7 @@ void ComponentViewRegistry::Initialize(winrt::Microsoft::ReactNative::ReactConte
 ComponentViewDescriptor const &ComponentViewRegistry::dequeueComponentViewWithComponentHandle(
     facebook::react::ComponentHandle componentHandle,
     facebook::react::Tag tag,
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext) noexcept {
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext) noexcept {
   // TODO implement recycled components like core does
 
   winrt::Microsoft::ReactNative::ComponentView view{nullptr};

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

@@ -19,7 +19,8 @@ class ComponentViewRegistry final : public IComponentViewRegistry {
   ComponentViewDescriptor const &dequeueComponentViewWithComponentHandle(
       facebook::react::ComponentHandle componentHandle,
       facebook::react::Tag tag,
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext) noexcept override;
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext) noexcept
+      override;
   ComponentViewDescriptor const &componentViewDescriptorWithTag(facebook::react::Tag tag) const noexcept override;
   winrt::Microsoft::ReactNative::ComponentView findComponentViewWithTag(
       facebook::react::Tag tag) const noexcept override;