Enable basic XamlIsland in rntester within playground app when UseExperimentalWinUI3 is true

change/react-native-windows-1fbec1a3-51f6-4e89-ac75-86846570013e.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Enable basic XamlIsland in rntester within playground app when UseExperimentalWinUI3 is true",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlExample.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+// Temporary test example for UseExperimentalWinUI3=true
+// Remove when we get react-native-xaml working well for Fabric
+
+import React, {useState} from 'react';
+import {Alert, Button, Text, View, ScrollView} from 'react-native';
+import {CalendarView} from 'sample-custom-component';
+
+const XamlContentExample = () => {
+  const [selectedDate, setSelectedDate] = useState(true);
+
+  return (
+    <ScrollView>
+      <View
+        style={{
+          margin: 20,
+          flexDirection: 'column',
+          gap: 5,
+        }}>
+        <Button
+          title="Before Button"
+          onPress={() => Alert.alert('Before button pressed')}
+        />
+        <Text>Xaml CalendarView control. Selected date: {selectedDate}</Text>
+        <CalendarView
+          style={{
+            width: 400,
+            height: 400,
+            minWidth: 400,
+            minHeight: 400,
+          }}
+          onSelectedDatesChanged={e => {
+            setSelectedDate(e.nativeEvent.startDate);
+          }}
+        />
+        <Button
+          title="After Button"
+          onPress={() => Alert.alert('After button pressed')}
+        />
+      </View>
+    </ScrollView>
+  );
+};
+
+exports.displayName = 'XamlFabricExample';
+exports.framework = 'React';
+exports.category = 'UI';
+exports.title = 'Xaml WinUI3 (Experimental, for Fabric)';
+exports.description =
+  'Requires UseExperimentalWinUI3 - Xaml content that works in Fabric';
+
+exports.examples = [
+  {
+    title: 'Xaml WinUI3 (Experimental, for Fabric)',
+    render: function (): React.Node {
+      return <XamlContentExample />;
+    },
+  },
+];

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

@@ -176,6 +176,11 @@ const Components: Array<RNTesterModuleInfo> = [
     category: 'UI',
     module: require('../examples-win/XAML/XAMLExample'),
   },
+  {
+    key: 'FabricXaml',
+    category: 'UI',
+    module: require('../examples-win/XAML/FabricXamlExample'),
+  },
   {
     key: 'LegacyControlStyleTest',
     module: require('../examples-win/LegacyTests/ControlStyleTestPage'),

packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap

@@ -6350,3 +6350,82 @@ exports[`Home UIA Tree Dump XMLHttpRequest 1`] = `
   },
 }
 `;
+
+exports[`Home UIA Tree Dump Xaml WinUI3 (Experimental, for Fabric) 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "Xaml WinUI3 (Experimental, for Fabric)",
+    "ControlType": 50026,
+    "IsKeyboardFocusable": true,
+    "LocalizedControlType": "group",
+    "Name": "Xaml WinUI3 (Experimental, for Fabric) Requires UseExperimentalWinUI3 - Xaml content that works in Fabric",
+    "__Children": [
+      {
+        "AutomationId": "",
+        "ControlType": 50020,
+        "LocalizedControlType": "text",
+        "Name": "Xaml WinUI3 (Experimental, for Fabric)",
+      },
+      {
+        "AutomationId": "",
+        "ControlType": 50020,
+        "LocalizedControlType": "text",
+        "Name": "Requires UseExperimentalWinUI3 - Xaml content that works in Fabric",
+      },
+    ],
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ViewComponentView",
+    "_Props": {
+      "AccessibilityLabel": "Xaml WinUI3 (Experimental, for Fabric) Requires UseExperimentalWinUI3 - Xaml content that works in Fabric",
+      "TestId": "Xaml WinUI3 (Experimental, for Fabric)",
+    },
+    "__Children": [
+      {
+        "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+        "_Props": {},
+      },
+      {
+        "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+        "_Props": {},
+      },
+    ],
+  },
+  "Visual Tree": {
+    "Brush": {
+      "Brush Type": "ColorBrush",
+      "Color": "rgba(255, 255, 255, 255)",
+    },
+    "Comment": "Xaml WinUI3 (Experimental, for Fabric)",
+    "Offset": "0, 0, 0",
+    "Size": "966, 78",
+    "Visual Type": "SpriteVisual",
+    "__Children": [
+      {
+        "Offset": "16, 16, 0",
+        "Size": "305, 25",
+        "Visual Type": "SpriteVisual",
+        "__Children": [
+          {
+            "Offset": "0, 0, 0",
+            "Size": "305, 25",
+            "Visual Type": "SpriteVisual",
+          },
+        ],
+      },
+      {
+        "Offset": "16, 45, 0",
+        "Size": "934, 17",
+        "Visual Type": "SpriteVisual",
+        "__Children": [
+          {
+            "Offset": "0, 0, 0",
+            "Size": "934, 17",
+            "Visual Type": "SpriteVisual",
+          },
+        ],
+      },
+    ],
+  },
+}
+`;

packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap

@@ -87138,3 +87138,204 @@ exports[`snapshotAllPages XMLHttpRequest 6`] = `
   </View>
 </View>
 `;
+
+exports[`snapshotAllPages Xaml WinUI3 (Experimental, for Fabric) 1`] = `
+<RCTScrollView>
+  <View>
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 5,
+          "margin": 20,
+        }
+      }
+    >
+      <View
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "multiselectable": undefined,
+            "readOnly": undefined,
+            "required": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "backgroundColor": {
+                "windowsbrush": [
+                  "ButtonBackground",
+                ],
+              },
+              "borderBottomWidth": 1.5,
+              "borderColor": {
+                "windowsbrush": [
+                  "ButtonBorderBrush",
+                ],
+              },
+              "borderRadius": 3,
+              "borderWidth": 1,
+            },
+          ]
+        }
+      >
+        <View
+          style={{}}
+        >
+          <View
+            style={{}}
+          >
+            <Text
+              style={
+                [
+                  {
+                    "color": {
+                      "windowsbrush": [
+                        "ButtonForeground",
+                      ],
+                    },
+                    "fontSize": 14,
+                    "fontWeight": "400",
+                    "margin": 8,
+                    "textAlign": "center",
+                  },
+                ]
+              }
+            >
+              Before Button
+            </Text>
+          </View>
+        </View>
+      </View>
+      <Text>
+        Xaml CalendarView control. Selected date: 
+      </Text>
+      <CalendarView
+        onSelectedDatesChanged={[Function]}
+        style={
+          {
+            "height": 400,
+            "minHeight": 400,
+            "minWidth": 400,
+            "width": 400,
+          }
+        }
+      />
+      <View
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "multiselectable": undefined,
+            "readOnly": undefined,
+            "required": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "backgroundColor": {
+                "windowsbrush": [
+                  "ButtonBackground",
+                ],
+              },
+              "borderBottomWidth": 1.5,
+              "borderColor": {
+                "windowsbrush": [
+                  "ButtonBorderBrush",
+                ],
+              },
+              "borderRadius": 3,
+              "borderWidth": 1,
+            },
+          ]
+        }
+      >
+        <View
+          style={{}}
+        >
+          <View
+            style={{}}
+          >
+            <Text
+              style={
+                [
+                  {
+                    "color": {
+                      "windowsbrush": [
+                        "ButtonForeground",
+                      ],
+                    },
+                    "fontSize": 14,
+                    "fontWeight": "400",
+                    "margin": 8,
+                    "textAlign": "center",
+                  },
+                ]
+              }
+            >
+              After Button
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</RCTScrollView>
+`;

packages/e2e-test-app/test/visitAllPages.test.ts

@@ -38,7 +38,8 @@ describe('visitAllPages', () => {
       component === 'Moving Light Example' ||
       component === 'Drawing Island Example' ||
       component === 'Fabric Native Component' ||
-      component === 'Fabric Native Component Yoga'
+      component === 'Fabric Native Component Yoga' ||
+      component === 'Xaml WinUI3 (Experimental, for Fabric)'
     ) {
       continue; // disable fabric specific tests
     }