Swipeable significantly decrease FlashList/FlatList performance #3141

import { Text, StyleSheet, View, Alert, FlatList } from 'react-native';

import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
import {
  FlashList,
  ListRenderItem,
  useBenchmark,
  useFlatListBenchmark,
} from '@shopify/flash-list';

function RightAction() {
  return <Text style={styles.rightAction}>Text</Text>;
}

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);

const _RenderItemView = (item: Item) => (
  <View style={styles.swipeable}>
    <Text>{item.title}</Text>
  </View>
);

const RenderItemViewMemoed = memo(_RenderItemView);

export default function Example() {
  const renderItem: ListRenderItem<Item> = ({ item }) => {
    return (
      <ReanimatedSwipeable renderRightActions={RightAction}>
        <RenderItemViewMemoed {...item} />
      </ReanimatedSwipeable>
    );
  };

  const flashListRef = useRef<FlashList<Item> | null>(null);
  useBenchmark(flashListRef, (callback) => {
    Alert.alert('result', callback.formattedString);
  });

  return (
    <FlashList
      ref={flashListRef}
      data={data}
      renderItem={renderItem}
      estimatedItemSize={50}
      keyExtractor={(item) => item.id}
    />
  );

  // Alternatively measure performance with FlatList
  // const flatList = useRef<FlatList<Item> | null>(null);
  // useFlatListBenchmark(
  //   flatList,
  //   (callback) => {
  //     Alert.alert('result', callback.formattedString);
  //   },
  //   {
  //     targetOffset: 10000,
  //   }
  // );
  //
  // return (
  //   <FlatList
  //     ref={flatList}
  //     data={data}
  //     renderItem={renderItem}
  //     keyExtractor={(item) => item.id}
  //   />
  // );
}

const styles = StyleSheet.create({
  leftAction: { width: 50, height: 50, backgroundColor: 'crimson' },
  rightAction: { width: 50, height: 50, backgroundColor: 'purple' },
  separator: {
    width: '100%',
    borderTopWidth: 1,
  },
  swipeable: {
    height: 50,
    backgroundColor: 'papayawhip',
    alignItems: 'center',
  },
});