[Fabric] Adds an example of using XamlIslands within fabric (#12589)

* [Fabric] Add support for custom native component to have c++ state and custom measure

* format

* Change files

* fix

* fix

* fix

* More c++ state methods

* Implementation of hosting xaml controls using winappsdk

* format

* build fix

* code review feedback

* Add yoga and inf sized hosting samples

* [Fabric] Add support for custom theme's, and support runtime theme change

* Change files

* buildfix

* cleanup

* Change files

* Remove scrollview changes as they have been split into its own change

* fix

* Bump default SDK to 22000

* lint fix

* fix

* snapshots

* no longer need ExperimentalFeatures.props import in sdx props.

NuGet.Config

@@ -8,5 +8,10 @@
     <clear />
     <!-- Warning: Do not add/change the NuGet feeds here. To be compliant this repo must only rely on this single ADO feed. -->
     <add key="react-native" value="https://pkgs.dev.azure.com/ms/react-native/_packaging/react-native-public/nuget/v3/index.json" />
+
+    <!-- For local internal development only, this will allow usage of internal WindowsApp.Sdk builds -->
+    <!--
+    <add key="Project.Reunion.nuget.internal" value="https://microsoft.pkgs.visualstudio.com/ProjectReunion/_packaging/Project.Reunion.nuget.internal/nuget/v3/index.json" />
+    -->
   </packageSources>
 </configuration>

change/react-native-windows-0c352120-b0f3-41a7-939c-e1f84f53f158.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update WinUI3Version ",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/tester/src/js/examples-win/NativeComponents/MyCustomComponentNativeComponent.js

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import {get} from 'react-native/Libraries/NativeComponent/NativeComponentRegistry';
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+
+  // Props
+  label: string,
+|}>;
+
+// Cannot just use codegenNativeComponent, or registerNativeComponent, since we need to provide a custom config
+const MyCustomComponent = get<NativeProps>('MyCustomComponent', () => {
+  return {
+    uiViewClassName: 'MyCustomComponent',
+    bubblingEventTypes: {},
+    directEventTypes: {},
+    validAttributes: {
+      label: true,
+    },
+  };
+});
+
+exports.MyCustomComponent = MyCustomComponent;

packages/@react-native-windows/tester/src/js/examples-win/NativeComponents/MyCustomComponentYogaNativeComponent.js

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import {get} from 'react-native/Libraries/NativeComponent/NativeComponentRegistry';
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+
+  // Props
+  label: string,
+|}>;
+
+// Cannot just use codegenNativeComponent, or registerNativeComponent, since we need to provide a custom config
+const MyCustomComponentYoga = get<NativeProps>('MyCustomComponentYoga', () => {
+  return {
+    uiViewClassName: 'MyCustomComponentYoga',
+    bubblingEventTypes: {},
+    directEventTypes: {},
+    validAttributes: {
+      label: true,
+    },
+  };
+});
+
+exports.MyCustomComponentYoga = MyCustomComponentYoga;

packages/@react-native-windows/tester/src/js/examples-win/NativeComponents/NativeComponent.windows.js

@@ -0,0 +1,55 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import React from 'react';
+import {Text, View} from 'react-native';
+import {MyCustomComponent} from './MyCustomComponentNativeComponent';
+
+exports.displayName = 'NativeFabricComponent';
+exports.framework = 'React';
+exports.category = 'UI';
+exports.title = 'Fabric Native Component';
+//exports.documentationURL = 'https://reactnative.dev/docs/button';
+exports.description =
+  'Sample Fabric Native Component that sizes based on max desired size of native XAML contained within';
+
+exports.examples = [
+  {
+    title: 'Native Component',
+    render: function (): React.Node {
+      return (
+        <View
+          style={{
+            borderRadius: 0,
+            margin: 10,
+            borderWidth: 2,
+            flexWrap: 'wrap',
+            flexDirection: 'row',
+            gap: 5,
+          }}>
+          <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
+          <Text style={{color: 'gray'}}>This is RN Text</Text>
+          <MyCustomComponent label="test" style={{flexShrink: 1}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
+        </View>
+      );
+    },
+  },
+];

packages/@react-native-windows/tester/src/js/examples-win/NativeComponents/NativeComponentYoga.windows.js

@@ -0,0 +1,58 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import React from 'react';
+import {Text, View} from 'react-native';
+import {MyCustomComponentYoga} from './MyCustomComponentYogaNativeComponent';
+
+exports.displayName = 'NativeFabricComponentYoga';
+exports.framework = 'React';
+exports.category = 'UI';
+exports.title = 'Fabric Native Component Yoga';
+//exports.documentationURL = 'https://reactnative.dev/docs/button';
+exports.description =
+  'Sample Fabric Native Component that places native XAML inside a container sized by yoga';
+
+exports.examples = [
+  {
+    title: 'Native Component',
+    render: function (): React.Node {
+      return (
+        <View
+          style={{
+            borderRadius: 0,
+            margin: 10,
+            borderWidth: 2,
+            flexWrap: 'wrap',
+            flexDirection: 'row',
+            gap: 5,
+          }}>
+          <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
+          <Text style={{color: 'gray'}}>This is RN Text</Text>
+          <MyCustomComponentYoga
+            label="test"
+            style={{flex: 1, minWidth: 100}}
+          />
+          <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
+          <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
+        </View>
+      );
+    },
+  },
+];

packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js

@@ -68,6 +68,14 @@ const Components: Array<RNTesterModuleInfo> = [
   //   category: 'UI',
   //   module: require('../examples/Modal/ModalExample'),
   // },
+  {
+    key: 'Native Component',
+    module: require('../examples-win/NativeComponents/NativeComponent'),
+  },
+  {
+    key: 'Native Component Yoga',
+    module: require('../examples-win/NativeComponents/NativeComponentYoga'),
+  },
   {
     key: 'NewAppScreenExample',
     module: require('../examples/NewAppScreen/NewAppScreenExample'),

packages/e2e-test-app-fabric/index.js

@@ -1 +1,18 @@
+require('react-native');
+
+function componentHasNativeconfig(name: string) {
+  return name !== 'MyCustomComponent' && name !== 'MyCustomComponentYoga'
+}
+
+const nativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry');
+nativeComponentRegistry.setRuntimeConfigProvider((name: string) => {
+  return {
+    native: componentHasNativeconfig(name), // The fabric native component test has no viewmanager to get native config from
+    strict: false,
+    verify: componentHasNativeconfig(name),
+  };
+});
+
 require('@react-native-windows/tester/js/RNTesterApp');
+
+export {};