diff --git a/FabricTestExample/App.js b/FabricTestExample/App.js
index 061e759c73..cdd5348eb0 100644
--- a/FabricTestExample/App.js
+++ b/FabricTestExample/App.js
@@ -1,22 +1,90 @@
+/* eslint-disable no-unused-vars */
import React from 'react';
+
+import {enableFreeze} from 'react-native-screens';
import {ReanimatedScreenProvider} from 'react-native-screens/reanimated';
import Test42 from './src/Test42';
+import Test111 from './src/Test111';
+import Test263 from './src/Test263';
+import Test349 from './src/Test349';
+import Test364 from './src/Test364';
+import Test528 from './src/Test528';
+import Test550 from './src/Test550';
import Test556 from './src/Test556';
+import Test564 from './src/Test564';
+import Test577 from './src/Test577';
+import Test593 from './src/Test593';
+import Test619 from './src/Test619';
import Test624 from './src/Test624';
+import Test640 from './src/Test640';
import Test642 from './src/Test642';
+import Test645 from './src/Test645';
+import Test648 from './src/Test648';
+import Test649 from './src/Test649';
+import Test654 from './src/Test654';
+import Test658 from './src/Test658';
+import Test662 from './src/Test662';
+import Test691 from './src/Test691';
+import Test702 from './src/Test702';
+import Test706 from './src/Test706';
+import Test713 from './src/Test713';
+import Test726 from './src/Test726';
+import Test748 from './src/Test748';
+import Test750 from './src/Test750';
import Test758 from './src/Test758';
+import Test761 from './src/Test761';
+import Test779 from './src/Test779';
import Test780 from './src/Test780';
+import Test791 from './src/Test791';
+import Test800 from './src/Test800';
+import Test817 from './src/Test817';
+import Test830 from './src/Test830';
+import Test831 from './src/Test831';
+import Test844 from './src/Test844';
+import Test852 from './src/Test852';
import Test860 from './src/Test860';
+import Test861 from './src/Test861';
+import Test865 from './src/Test865';
+import Test881 from './src/Test881';
import Test887 from './src/Test887';
+import Test898 from './src/Test898';
+import Test913 from './src/Test913';
+import Test999 from './src/Test999';
+import Test1017 from './src/Test1017';
+import Test1031 from './src/Test1031';
+import Test1032 from './src/Test1032';
+import Test1036 from './src/Test1036';
import Test1072 from './src/Test1072';
+import Test1084 from './src/Test1084';
+import Test1091 from './src/Test1091';
+import Test1096 from './src/Test1096';
+import Test1153 from './src/Test1153';
+import Test1157 from './src/Test1157';
+import Test1162 from './src/Test1162';
+import Test1166 from './src/Test1166';
+import Test1188 from './src/Test1188';
+import Test1190 from './src/Test1190';
+import TestFreeze from './src/TestFreeze';
+import Test1198 from './src/Test1198';
+import Test1204 from './src/Test1204';
+import Test1209 from './src/Test1209';
+import Test1213 from './src/Test1213';
+import Test1214 from './src/Test1214';
+import Test1227 from './src/Test1227';
+import Test1228 from './src/Test1228';
+import Test1259 from './src/Test1259';
import Test1260 from './src/Test1260';
-import Test1463 from './src/Test1463';
+import Test1296 from './src/Test1296';
+import Test1299 from './src/Test1299';
+import Test1419 from './src/Test1419';
+
+enableFreeze(true);
export default function App() {
return (
-
+
);
-}
\ No newline at end of file
+}
diff --git a/FabricTestExample/src/Test1017.tsx b/FabricTestExample/src/Test1017.tsx
new file mode 100644
index 0000000000..f297170fe4
--- /dev/null
+++ b/FabricTestExample/src/Test1017.tsx
@@ -0,0 +1,146 @@
+import {NavigationContainer, RouteProp} from '@react-navigation/native';
+import {
+ createStackNavigator,
+ StackNavigationProp,
+ TransitionPresets,
+} from '@react-navigation/stack';
+import React from 'react';
+import {Alert, LogBox} from 'react-native';
+import {StyleSheet, Text, View, FlatList, Pressable} from 'react-native';
+import {ScrollView} from 'react-native-gesture-handler';
+
+import {
+ Header,
+ Colors,
+ DebugInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+type DataItem = {
+ title: string;
+ value: number;
+};
+
+enum Route {
+ FirstScreen = 'FirstScreen',
+ SecondScreen = 'SecondScreen',
+}
+
+type RootStackParamList = {
+ [Route.FirstScreen]: undefined;
+ [Route.SecondScreen]: undefined;
+};
+
+LogBox.ignoreLogs([
+ 'VirtualizedLists should never be nested inside plain ScrollViews',
+]);
+
+const Stack = createStackNavigator();
+
+const dataset = Array.from({length: 100}, (_, i) => ({
+ title: `Title ${i}`,
+ value: i,
+}));
+
+const Screen: React.FC<{
+ route: RouteProp;
+ navigation: StackNavigationProp;
+}> = ({route, navigation}) => {
+ for (let i = 0; i < 10 ** 3; i++) {}
+ const isSecondScreen = route.name === Route.SecondScreen;
+
+ const handleItemPress = (item: DataItem) => () => {
+ if (isSecondScreen) {
+ Alert.alert(item.title, item.value.toString());
+ return;
+ }
+ navigation.navigate(Route.SecondScreen);
+ };
+
+ const renderItem = (item: DataItem) => (
+
+
+ {item.title}
+ {`This is item number ${item.value}`}
+
+
+ );
+
+ return (
+ // So in a much more complex scenario, we might have a ScrollView that contains multiple horizontal list
+ // I know it's bad to have a FlatList nested in ScrollView, ideally I should use something better
+ // However, it seems like having a nested VirtualizeList in ScrollView will cause the transition lag issue
+
+ item.value.toString()}
+ renderItem={({item}) => renderItem(item)}
+ ItemSeparatorComponent={() => }
+ ListHeaderComponent={!isSecondScreen && Header}
+ ListHeaderComponentStyle={styles.headerWrapper}
+ ListFooterComponent={!isSecondScreen && DebugInstructions}
+ ListFooterComponentStyle={styles.footerWrapper}
+ scrollEnabled={false}
+ />
+
+ );
+};
+
+const App: React.FC = () => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ headerWrapper: {
+ overflow: 'hidden',
+ },
+ footerWrapper: {
+ paddingVertical: 50 / 3,
+ paddingHorizontal: 40 / 3,
+ },
+ listItemContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingHorizontal: 50 / 3,
+ paddingVertical: 40 / 3,
+ },
+ image: {
+ width: 200 / 3,
+ aspectRatio: 1,
+ borderRadius: 25 / 3,
+ backgroundColor: Colors.primary,
+ },
+ listItemContentWrapper: {
+ flexDirection: 'column',
+ paddingHorizontal: 30 / 3,
+ },
+ listItemTitle: {
+ fontWeight: 'bold',
+ fontSize: 50 / 3,
+ },
+ separator: {
+ height: 1 / 3,
+ flex: 1,
+ marginHorizontal: 50 / 3,
+ backgroundColor: '#000',
+ },
+});
+
+export default App;
diff --git a/FabricTestExample/src/Test1031.tsx b/FabricTestExample/src/Test1031.tsx
new file mode 100644
index 0000000000..74a874dfc0
--- /dev/null
+++ b/FabricTestExample/src/Test1031.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import {Button} from 'react-native';
+import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import {createNativeStackNavigator, NativeStackNavigationProp, useHeaderHeight} from 'react-native-screens/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+ return (
+
+
+
+
+
+
+ );
+}
+
+function First({navigation}: {navigation: NativeStackNavigationProp}) {
+ console.log(useHeaderHeight());
+ return (
+