Some performance issues when combining FlatList, react-native-gesture-handler, and react-native-reanimated

[yinminqian]

Description

I am going to replicate the apple store animation effect, there is a zoom in and zoom out effect when sliding the interface and clicking to each View, and a long press can keep the zoom out, I wrote a minimal reproduction of the example, but on the real machine and emulator, as long as the animation and flatlist sliding are running at the same time, it is just a sliding lag, is there something that I am doing wrong? What should I do to improve it? My minimal re-code has been written below

2024-04-04.15.40.00.mp4

Steps to reproduce

import { Text, SafeAreaView } from "react-native";
import { Gesture, GestureDetector, FlatList } from "react-native-gesture-handler";
import Animated, {
  Easing,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";

const data = new Array(50).fill("1");
export const LoginScreen = () => {
  return <SafeAreaView style={{ flex: 1 }}>
    <FlatList data={data}
              style={{ flex: 1 }}
              renderItem={({ item, index }) => <ItemTap index={index} />}
    />
  </SafeAreaView>;
};
const ItemTap = ({ data, index }) => {

  const scale = useSharedValue(1);
  const gesture = Gesture.LongPress()
    .maxDistance(1)
    .minDuration(1000 * 60 * 30)
    .onBegin((e) => {
      "worklet";
      scale.value = withTiming(0.95, {
        duration: 300,
        easing: Easing.inOut(Easing.quad),
      });
    })
    .onEnd((e) => {
      console.log("onEnd==>", e);
    })
    .onFinalize((e) => {
      "worklet";
      scale.value = withTiming(1, {
        duration: 100,
        easing: Easing.inOut(Easing.quad),
      });
    });
  return <GestureDetector gesture={gesture}>
    <Animated.View style={{
      height: 200,
      borderRadius: 10,
      borderWidth: 1,
      borderColor: "red",
      marginBottom: 20,
      marginHorizontal: 20,
      alignItems: "center",
      justifyContent: "center",
      transform: [{ scale }],
    }}>
      <Text>{index}</Text>
    </Animated.View>
  </GestureDetector>;
};

Snack or a link to a repository

https://github.com/yinminqian/Troubleshooting

Gesture Handler version

2.15.0

React Native version

0.73.6

Platforms

Android, MacOS

JavaScript runtime

Hermes

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

iphone 11 ,xiaomi10

Acknowledgements

Yes

[yinminqian]

2024-04-04.15.54.11.mp4

Guys,to add to this, this is the desired effect, the sliding is smooth, and tapping on each block will zoom in and out