chore: remove dependency on react-navigation@v4 & unify test example apps

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 (
     <ReanimatedScreenProvider>
-      <Test887 />
+      <Test42 />
     </ReanimatedScreenProvider>
   );
-}
+}

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<unknown, DataItem>({length: 100}, (_, i) => ({
+  title: `Title ${i}`,
+  value: i,
+}));
+
+const Screen: React.FC<{
+  route: RouteProp<RootStackParamList, any>;
+  navigation: StackNavigationProp<RootStackParamList, any>;
+}> = ({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) => (
+    <Pressable
+      android_ripple={{color: Colors.light}}
+      style={styles.listItemContainer}
+      onPress={handleItemPress(item)}>
+      <View style={styles.listItemContentWrapper}>
+        <Text style={styles.listItemTitle}>{item.title}</Text>
+        <Text>{`This is item number ${item.value}`}</Text>
+      </View>
+    </Pressable>
+  );
+
+  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
+    <ScrollView>
+      <FlatList
+        data={dataset}
+        keyExtractor={(item) => item.value.toString()}
+        renderItem={({item}) => renderItem(item)}
+        ItemSeparatorComponent={() => <View style={styles.separator} />}
+        ListHeaderComponent={!isSecondScreen && Header}
+        ListHeaderComponentStyle={styles.headerWrapper}
+        ListFooterComponent={!isSecondScreen && DebugInstructions}
+        ListFooterComponentStyle={styles.footerWrapper}
+        scrollEnabled={false}
+      />
+    </ScrollView>
+  );
+};
+
+const App: React.FC = () => {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{...TransitionPresets.SlideFromRightIOS}}>
+        <Stack.Screen
+          name={Route.FirstScreen}
+          component={Screen}
+          options={{title: 'Sample List'}}
+        />
+        <Stack.Screen
+          name={Route.SecondScreen}
+          component={Screen}
+          options={{title: 'Sample List 2'}}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+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;

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 (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{stackPresentation: 'formSheet', headerShown: false}}>
+        <Stack.Screen name="First" component={First} />
+        <Stack.Screen
+          name="Second"
+          component={Second}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+function First({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+  console.log(useHeaderHeight());
+  return (
+    <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
+
+  );
+}
+
+function Second({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+  console.log(useHeaderHeight());
+  return (
+    <Button title="Tap me for first screen" onPress={() => navigation.navigate('First')} />
+  );
+}
+

FabricTestExample/src/Test1032.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import {Alert, Button, Switch, Text, 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() {
+  const [gestureEnabled, setGestureEnable] = React.useState(false);
+  return (
+    <View style={{flex: 1, paddingBottom: 200}}>
+      <NavigationContainer>
+        <Stack.Navigator screenOptions={{gestureEnabled}}>
+          <Stack.Screen name="Top" component={First} />
+          <Stack.Screen name="Top1" component={Second} />
+        </Stack.Navigator>
+      </NavigationContainer>
+      <View>
+        <Text>Gesture enabled</Text>
+        <Switch value={gestureEnabled} onValueChange={setGestureEnable} />
+      </View>
+    </View>
+  );
+}
+
+function First({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
+  return (
+    <View style={{backgroundColor: '#FFF'}}>
+      <Button
+        title="Tap me for second screen"
+        onPress={() => navigation.push('Top1')}
+      />
+    </View>
+  );
+}
+
+function Second() {
+  return (
+    <View style={{backgroundColor: '#FFF'}}>
+      <Button title="Swipe back to see if button click triggers" onPress={() => Alert.alert('Click detected')} />
+    </View>
+  );
+}

FabricTestExample/src/Test1036.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+const Screen = () => {
+  return null;
+};
+
+const App = () => {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        initialRouteName="Screen"
+        screenOptions={{
+          headerTitle: 'Title',
+          searchBar: {
+            onCancelButtonPress: ()=>{
+              console.log('cancel button press')
+            }
+          },
+        }}>
+        <Stack.Screen name="Screen" component={Screen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default App;