add tests, packages, memoize parts of swipeable

MacOSExample/macos/Podfile.lock

@@ -1443,10 +1443,10 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: 0686b6af8cbd638c784fea5afb789be66699823c
-  DoubleConversion: acaf5db79676d2e9119015819153f0f99191de12
+  DoubleConversion: 5b92c4507c560bb62e7aa1acdf2785ea3ff08b3b
   FBLazyVector: 8f41053475f558b29633b434bd62929813a38560
   fmt: 03574da4b7ba40de39da59677ca66610ce8c4a02
-  glog: 6df0a3d6e2750a50609471fd1a01fd2948d405b5
+  glog: ba31c1afa7dcf1915a109861bccdb4421be6175b
   hermes-engine: 2102c92e54a031a270fd1fe84169ec8a0901b7bd
   RCT-Folly: 2edbb9597acadc2312235c7ad6243d49852047a3
   RCTDeprecation: 5f1d7e1f8ef6c53f0207e3ac0d0ca23575e8a6ab

example/package.json

@@ -23,6 +23,7 @@
     "@react-navigation/elements": "^1.3.7",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^6.3.29",
+    "@shopify/flash-list": "^1.7.1",
     "@swmansion/icons": "^0.0.1",
     "expo": "^51.0.0",
     "expo-camera": "~15.0.9",
@@ -35,7 +36,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.74.1",
     "react-native-gesture-handler": "link:..",
-    "react-native-reanimated": "3.10.0",
+    "react-native-reanimated": "3.15.0",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",

example/src/empty/EmptyExample.tsx

@@ -1,19 +1,77 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useCallback } from 'react';
+import { Text, StyleSheet, View, Alert } from 'react-native';
+
+import { FlashList, ListRenderItem, useBenchmark } from '@shopify/flash-list';
+import { useRef } from 'react';
+import { Pressable } from 'react-native-gesture-handler';
+import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
+
+type Item = {
+  id: string;
+  title: string;
+};
+
+const generateItems = (count: number): Item[] => {
+  return Array.from({ length: count }, () => {
+    const randomNumber = Math.random().toString(36).substring(2, 8);
+    return {
+      id: randomNumber,
+      title: `Title ${randomNumber}`,
+    };
+  });
+};
+
+const data = generateItems(200);
+
+export default function Example() {
+  const renderSwipeable: ListRenderItem<Item> = useCallback(
+    ({ item }: { item: any }) => {
+      return (
+        <ReanimatedSwipeable>
+          <View style={styles.swipeable}>
+            <Text>{item.title}</Text>
+          </View>
+        </ReanimatedSwipeable>
+      );
+      // eslint-disable-next-line no-unreachable
+      return (
+        <Pressable>
+          <View style={styles.swipeable}>
+            <Text>{item.title}</Text>
+          </View>
+        </Pressable>
+      );
+    },
+    []
+  );
+
+  const flashListRef = useRef<FlashList<Item> | null>(null);
+  useBenchmark(flashListRef, (callback) => {
+    Alert.alert('result', callback.formattedString);
+  });
+
+  console.log('main rerender');
 
-export default function EmptyExample() {
   return (
-    <View style={styles.container}>
-      <Text style={{ fontSize: 64, opacity: 0.25 }}>😞</Text>
-      <Text style={{ fontSize: 24, opacity: 0.25 }}>It's so empty here</Text>
-    </View>
+    <FlashList
+      ref={flashListRef}
+      data={data}
+      renderItem={renderSwipeable}
+      estimatedItemSize={50}
+      keyExtractor={(item: any) => item.id}
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
+  action: { width: 50, height: 50, backgroundColor: 'purple' },
+  separator: {
+    width: '100%',
+    borderTopWidth: 1,
+  },
+  swipeable: {
+    height: 50,
+    backgroundColor: 'papayawhip',
     alignItems: 'center',
   },
 });