Skip to content

Commit 6eb1e47

Browse files
JesseColJesseCol
authored
Enable basic XamlIsland in rntester within playground app when UseExperimentalWinUI3 is true (#14272)
* Enable basic XamlIsland in rntester within playground app when UseExperimentalWinUI3 is true * Change files * Fix build break due to unreferenced parameter * lint * Move the implementation of CalendarView to sample-custom-component, and use codegen * Enable CalendarView only when UseExperimentalWinUI3 is true, and add CalendarView.g.h to git * clang format * Update snapshots and remove some unused variables * Update snapshotPages.test.js.snap * Remove new page from the visitAllPages test
1 parent 79e27a7 commit 6eb1e47

File tree

25 files changed

+731
-20
lines changed

25 files changed

+731
-20
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Enable basic XamlIsland in rntester within playground app when UseExperimentalWinUI3 is true",
4+
"packageName": "react-native-windows",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/**
2+
* Copyright (c) Microsoft Corporation.
3+
* Licensed under the MIT License.
4+
* @format
5+
* @flow
6+
*/
7+
8+
'use strict';
9+
10+
// Temporary test example for UseExperimentalWinUI3=true
11+
// Remove when we get react-native-xaml working well for Fabric
12+
13+
import React, {useState} from 'react';
14+
import {Alert, Button, Text, View, ScrollView} from 'react-native';
15+
import {CalendarView} from 'sample-custom-component';
16+
17+
const XamlContentExample = () => {
18+
const [selectedDate, setSelectedDate] = useState(true);
19+
20+
return (
21+
<ScrollView>
22+
<View
23+
style={{
24+
margin: 20,
25+
flexDirection: 'column',
26+
gap: 5,
27+
}}>
28+
<Button
29+
title="Before Button"
30+
onPress={() => Alert.alert('Before button pressed')}
31+
/>
32+
<Text>Xaml CalendarView control. Selected date: {selectedDate}</Text>
33+
<CalendarView
34+
style={{
35+
width: 400,
36+
height: 400,
37+
minWidth: 400,
38+
minHeight: 400,
39+
}}
40+
onSelectedDatesChanged={e => {
41+
setSelectedDate(e.nativeEvent.startDate);
42+
}}
43+
/>
44+
<Button
45+
title="After Button"
46+
onPress={() => Alert.alert('After button pressed')}
47+
/>
48+
</View>
49+
</ScrollView>
50+
);
51+
};
52+
53+
exports.displayName = 'XamlFabricExample';
54+
exports.framework = 'React';
55+
exports.category = 'UI';
56+
exports.title = 'Xaml WinUI3 (Experimental, for Fabric)';
57+
exports.description =
58+
'Requires UseExperimentalWinUI3 - Xaml content that works in Fabric';
59+
60+
exports.examples = [
61+
{
62+
title: 'Xaml WinUI3 (Experimental, for Fabric)',
63+
render: function (): React.Node {
64+
return <XamlContentExample />;
65+
},
66+
},
67+
];

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,11 @@ const Components: Array<RNTesterModuleInfo> = [
176176
category: 'UI',
177177
module: require('../examples-win/XAML/XAMLExample'),
178178
},
179+
{
180+
key: 'FabricXaml',
181+
category: 'UI',
182+
module: require('../examples-win/XAML/FabricXamlExample'),
183+
},
179184
{
180185
key: 'LegacyControlStyleTest',
181186
module: require('../examples-win/LegacyTests/ControlStyleTestPage'),

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6350,3 +6350,82 @@ exports[`Home UIA Tree Dump XMLHttpRequest 1`] = `
63506350
},
63516351
}
63526352
`;
6353+
6354+
exports[`Home UIA Tree Dump Xaml WinUI3 (Experimental, for Fabric) 1`] = `
6355+
{
6356+
"Automation Tree": {
6357+
"AutomationId": "Xaml WinUI3 (Experimental, for Fabric)",
6358+
"ControlType": 50026,
6359+
"IsKeyboardFocusable": true,
6360+
"LocalizedControlType": "group",
6361+
"Name": "Xaml WinUI3 (Experimental, for Fabric) Requires UseExperimentalWinUI3 - Xaml content that works in Fabric",
6362+
"__Children": [
6363+
{
6364+
"AutomationId": "",
6365+
"ControlType": 50020,
6366+
"LocalizedControlType": "text",
6367+
"Name": "Xaml WinUI3 (Experimental, for Fabric)",
6368+
},
6369+
{
6370+
"AutomationId": "",
6371+
"ControlType": 50020,
6372+
"LocalizedControlType": "text",
6373+
"Name": "Requires UseExperimentalWinUI3 - Xaml content that works in Fabric",
6374+
},
6375+
],
6376+
},
6377+
"Component Tree": {
6378+
"Type": "Microsoft.ReactNative.Composition.ViewComponentView",
6379+
"_Props": {
6380+
"AccessibilityLabel": "Xaml WinUI3 (Experimental, for Fabric) Requires UseExperimentalWinUI3 - Xaml content that works in Fabric",
6381+
"TestId": "Xaml WinUI3 (Experimental, for Fabric)",
6382+
},
6383+
"__Children": [
6384+
{
6385+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
6386+
"_Props": {},
6387+
},
6388+
{
6389+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
6390+
"_Props": {},
6391+
},
6392+
],
6393+
},
6394+
"Visual Tree": {
6395+
"Brush": {
6396+
"Brush Type": "ColorBrush",
6397+
"Color": "rgba(255, 255, 255, 255)",
6398+
},
6399+
"Comment": "Xaml WinUI3 (Experimental, for Fabric)",
6400+
"Offset": "0, 0, 0",
6401+
"Size": "966, 78",
6402+
"Visual Type": "SpriteVisual",
6403+
"__Children": [
6404+
{
6405+
"Offset": "16, 16, 0",
6406+
"Size": "305, 25",
6407+
"Visual Type": "SpriteVisual",
6408+
"__Children": [
6409+
{
6410+
"Offset": "0, 0, 0",
6411+
"Size": "305, 25",
6412+
"Visual Type": "SpriteVisual",
6413+
},
6414+
],
6415+
},
6416+
{
6417+
"Offset": "16, 45, 0",
6418+
"Size": "934, 17",
6419+
"Visual Type": "SpriteVisual",
6420+
"__Children": [
6421+
{
6422+
"Offset": "0, 0, 0",
6423+
"Size": "934, 17",
6424+
"Visual Type": "SpriteVisual",
6425+
},
6426+
],
6427+
},
6428+
],
6429+
},
6430+
}
6431+
`;

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

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87138,3 +87138,204 @@ exports[`snapshotAllPages XMLHttpRequest 6`] = `
8713887138
</View>
8713987139
</View>
8714087140
`;
87141+
87142+
exports[`snapshotAllPages Xaml WinUI3 (Experimental, for Fabric) 1`] = `
87143+
<RCTScrollView>
87144+
<View>
87145+
<View
87146+
style={
87147+
{
87148+
"flexDirection": "column",
87149+
"gap": 5,
87150+
"margin": 20,
87151+
}
87152+
}
87153+
>
87154+
<View
87155+
accessibilityRole="button"
87156+
accessibilityState={
87157+
{
87158+
"busy": undefined,
87159+
"checked": undefined,
87160+
"disabled": undefined,
87161+
"expanded": undefined,
87162+
"multiselectable": undefined,
87163+
"readOnly": undefined,
87164+
"required": undefined,
87165+
"selected": undefined,
87166+
}
87167+
}
87168+
accessibilityValue={
87169+
{
87170+
"max": undefined,
87171+
"min": undefined,
87172+
"now": undefined,
87173+
"text": undefined,
87174+
}
87175+
}
87176+
accessible={true}
87177+
focusable={true}
87178+
onBlur={[Function]}
87179+
onClick={[Function]}
87180+
onFocus={[Function]}
87181+
onKeyDown={[Function]}
87182+
onKeyUp={[Function]}
87183+
onMouseEnter={[Function]}
87184+
onMouseLeave={[Function]}
87185+
onResponderGrant={[Function]}
87186+
onResponderMove={[Function]}
87187+
onResponderRelease={[Function]}
87188+
onResponderTerminate={[Function]}
87189+
onResponderTerminationRequest={[Function]}
87190+
onStartShouldSetResponder={[Function]}
87191+
style={
87192+
[
87193+
{
87194+
"backgroundColor": {
87195+
"windowsbrush": [
87196+
"ButtonBackground",
87197+
],
87198+
},
87199+
"borderBottomWidth": 1.5,
87200+
"borderColor": {
87201+
"windowsbrush": [
87202+
"ButtonBorderBrush",
87203+
],
87204+
},
87205+
"borderRadius": 3,
87206+
"borderWidth": 1,
87207+
},
87208+
]
87209+
}
87210+
>
87211+
<View
87212+
style={{}}
87213+
>
87214+
<View
87215+
style={{}}
87216+
>
87217+
<Text
87218+
style={
87219+
[
87220+
{
87221+
"color": {
87222+
"windowsbrush": [
87223+
"ButtonForeground",
87224+
],
87225+
},
87226+
"fontSize": 14,
87227+
"fontWeight": "400",
87228+
"margin": 8,
87229+
"textAlign": "center",
87230+
},
87231+
]
87232+
}
87233+
>
87234+
Before Button
87235+
</Text>
87236+
</View>
87237+
</View>
87238+
</View>
87239+
<Text>
87240+
Xaml CalendarView control. Selected date:
87241+
</Text>
87242+
<CalendarView
87243+
onSelectedDatesChanged={[Function]}
87244+
style={
87245+
{
87246+
"height": 400,
87247+
"minHeight": 400,
87248+
"minWidth": 400,
87249+
"width": 400,
87250+
}
87251+
}
87252+
/>
87253+
<View
87254+
accessibilityRole="button"
87255+
accessibilityState={
87256+
{
87257+
"busy": undefined,
87258+
"checked": undefined,
87259+
"disabled": undefined,
87260+
"expanded": undefined,
87261+
"multiselectable": undefined,
87262+
"readOnly": undefined,
87263+
"required": undefined,
87264+
"selected": undefined,
87265+
}
87266+
}
87267+
accessibilityValue={
87268+
{
87269+
"max": undefined,
87270+
"min": undefined,
87271+
"now": undefined,
87272+
"text": undefined,
87273+
}
87274+
}
87275+
accessible={true}
87276+
focusable={true}
87277+
onBlur={[Function]}
87278+
onClick={[Function]}
87279+
onFocus={[Function]}
87280+
onKeyDown={[Function]}
87281+
onKeyUp={[Function]}
87282+
onMouseEnter={[Function]}
87283+
onMouseLeave={[Function]}
87284+
onResponderGrant={[Function]}
87285+
onResponderMove={[Function]}
87286+
onResponderRelease={[Function]}
87287+
onResponderTerminate={[Function]}
87288+
onResponderTerminationRequest={[Function]}
87289+
onStartShouldSetResponder={[Function]}
87290+
style={
87291+
[
87292+
{
87293+
"backgroundColor": {
87294+
"windowsbrush": [
87295+
"ButtonBackground",
87296+
],
87297+
},
87298+
"borderBottomWidth": 1.5,
87299+
"borderColor": {
87300+
"windowsbrush": [
87301+
"ButtonBorderBrush",
87302+
],
87303+
},
87304+
"borderRadius": 3,
87305+
"borderWidth": 1,
87306+
},
87307+
]
87308+
}
87309+
>
87310+
<View
87311+
style={{}}
87312+
>
87313+
<View
87314+
style={{}}
87315+
>
87316+
<Text
87317+
style={
87318+
[
87319+
{
87320+
"color": {
87321+
"windowsbrush": [
87322+
"ButtonForeground",
87323+
],
87324+
},
87325+
"fontSize": 14,
87326+
"fontWeight": "400",
87327+
"margin": 8,
87328+
"textAlign": "center",
87329+
},
87330+
]
87331+
}
87332+
>
87333+
After Button
87334+
</Text>
87335+
</View>
87336+
</View>
87337+
</View>
87338+
</View>
87339+
</View>
87340+
</RCTScrollView>
87341+
`;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ describe('visitAllPages', () => {
3838
component === 'Moving Light Example' ||
3939
component === 'Drawing Island Example' ||
4040
component === 'Fabric Native Component' ||
41-
component === 'Fabric Native Component Yoga'
41+
component === 'Fabric Native Component Yoga' ||
42+
component === 'Xaml WinUI3 (Experimental, for Fabric)'
4243
) {
4344
continue; // disable fabric specific tests
4445
}

0 commit comments

Comments
 (0)