Search code examples
react-nativereact-native-flatlistreact-native-reanimatedreact-animatedreact-native-gesture-handler

Animation lags with inverted Flatlist (Expo / TypeScript)


I was trying to implement a WhatsApp like cancelling recording button. Everything was working fine, all animations lauching correctly, start and stop recording too.

But after a few seconds (could be 10 seconds or 1 minute) pressing the gesture handler, the app freeze, all animations start to lags and FPS drop to 0. After trying many things, I found out that it is linked with a Flatlist I have in my view. When this Flatlist is inverted, that is when everything crash.

Here is the link of the Snack https://snack.expo.dev/@mikelh997/animationtest Just try to move the mic for at least 30 seconds on a physical device and you will see the app freeze

I am doing my tests on Android emulator and on Samsung S21 Ultra. On iOS everything seems to work fine

Thinking it was may be my packages version, I started a new project and put inside my view only a Flatlist with text items and my PanGestureHandler. All packages are up to date, even though the behavior is the same. If I remove "inverted" from my Flatlist, everything work fine.

I also tried to use Animated.Flatlist but no change (actually it's worse because inverted in Animated.Flatlist is not working correctly)

I also tried to reproduce it on Snack Expo, on my phone it crashes.

I noticed also that it is not linked to PanGestureHandler or Reanimated, because if I just create an animation with React Animated (with Animated.timing), and loop it, it does the same.

Edit : it seems like it is happening only on Android 13


Solution

  • After research, it is linked to Android 13, more and more people are facing this issue.

    Only solution I found on Github was here, it is the only way to make it worked while waiting for a fix