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 ( + + + ); +}; + +const Screen1 = () => { + const navigation = useNavigation(); + + return ( + + + + ); +}; + +const Details = () => { + return ( + + + + ); +}; + +const App = () => { + return ( + + JS Navigation + + + + + + + Native Navigation + + + + + + + + ); +}; + +export default App; diff --git a/FabricTestExample/src/Test1227.tsx b/FabricTestExample/src/Test1227.tsx new file mode 100644 index 0000000000..98d74bff0b --- /dev/null +++ b/FabricTestExample/src/Test1227.tsx @@ -0,0 +1,74 @@ +import * as React from 'react'; +import {Button, View} from 'react-native'; +import {NavigationContainer, ParamListBase} from '@react-navigation/native'; +import { + createNativeStackNavigator, + NativeStackNavigationProp, +} from 'react-native-screens/native-stack'; + +const Stack = createNativeStackNavigator(); + +export default function App() { + return ( + + + + + + + + ); +} + +function First({ + navigation, +}: { + navigation: NativeStackNavigationProp; +}) { + return ( + +