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');
+ });
});