diff --git a/change/react-native-windows-75d6c7d7-52e4-4f20-8943-8cacf13e6f88.json b/change/react-native-windows-75d6c7d7-52e4-4f20-8943-8cacf13e6f88.json new file mode 100644 index 00000000000..c548360009a --- /dev/null +++ b/change/react-native-windows-75d6c7d7-52e4-4f20-8943-8cacf13e6f88.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Update generated codegen files after yarn install", + "packageName": "react-native-windows", + "email": "198982749+Copilot@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/@react-native-windows/tester/src/js/examples/View/ViewExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/View/ViewExample.windows.js index d9117c9f404..dd9a0df05af 100644 --- a/packages/@react-native-windows/tester/src/js/examples/View/ViewExample.windows.js +++ b/packages/@react-native-windows/tester/src/js/examples/View/ViewExample.windows.js @@ -671,6 +671,65 @@ function BoxSizingExample(): React.Node { ); } +class FastRefreshStyleExample extends React.Component< + $ReadOnly<{}>, + {currentStyle: number, isAutoRefreshing: boolean}, +> { + state: {currentStyle: number, isAutoRefreshing: boolean} = { + currentStyle: 0, + isAutoRefreshing: false, + }; + + styles = [ + {backgroundColor: '#ff6b6b', padding: 20, borderRadius: 5}, + {backgroundColor: '#4ecdc4', padding: 15, borderRadius: 10}, + {backgroundColor: '#45b7d1', padding: 25, borderRadius: 15}, + {backgroundColor: '#96ceb4', padding: 10, borderRadius: 20}, + ]; + + intervalId: ?IntervalID = null; + + componentDidMount() { + // Start auto-refresh after a short delay to simulate fast refresh behavior + this.intervalId = setInterval(() => { + if (this.state.isAutoRefreshing) { + this.setState({ + currentStyle: (this.state.currentStyle + 1) % this.styles.length, + }); + } + }, 2000); + } + + componentWillUnmount() { + if (this.intervalId) { + clearInterval(this.intervalId); + } + } + + render(): React.Node { + return ( + + + + + {this.state.isAutoRefreshing ? 'Auto-refreshing styles...' : 'Tap to start fast refresh simulation'} + + + Style: {this.state.currentStyle + 1} of {this.styles.length} + + + + + ); + } + + _handlePress = () => { + this.setState({ + isAutoRefreshing: !this.state.isAutoRefreshing, + }); + }; +} + export default ({ title: 'View', documentationURL: 'https://reactnative.dev/docs/view', @@ -1404,6 +1463,13 @@ export default ({ return ; }, }, + { + title: 'Fast Refresh Style Updates', + name: 'fast-refresh', + render(): React.Node { + return ; + }, + }, { title: 'ToolTip', render(): React.Node { diff --git a/packages/e2e-test-app-fabric/test/ViewComponentTest.test.ts b/packages/e2e-test-app-fabric/test/ViewComponentTest.test.ts index 4b6e7574fe6..18fbfe56e81 100644 --- a/packages/e2e-test-app-fabric/test/ViewComponentTest.test.ts +++ b/packages/e2e-test-app-fabric/test/ViewComponentTest.test.ts @@ -199,4 +199,32 @@ describe('View Tests', () => { const dump = await dumpVisualTree('nativeid'); expect(dump).toMatchSnapshot(); }); + test('Views should update style upon fast refresh', async () => { + await searchBox('fas'); + const componentsTab = await app.findElementByTestID('view-test-fast-refresh'); + await componentsTab.waitForDisplayed({timeout: 5000}); + + // Take initial snapshot + const initialDump = await dumpVisualTree('view-test-fast-refresh'); + expect(initialDump).toMatchSnapshot('initial-state'); + + // Click to start auto-refresh (simulating fast refresh activation) + await componentsTab.click(); + + // Wait for automatic style changes to occur (simulating fast refresh) + await app.waitUntil( + async () => { + const currentDump = await dumpVisualTree('view-test-fast-refresh'); + return currentDump !== initialDump; + }, + { + timeout: 5000, + timeoutMsg: 'View style did not auto-update during fast refresh simulation', + } + ); + + // Take snapshot after automatic style change + const updatedDump = await dumpVisualTree('view-test-fast-refresh'); + expect(updatedDump).toMatchSnapshot('updated-state'); + }); });