Android ANR triggered when referencing a method in gesture's worklet in FlatList item

[pdpino]

Description

An ANR (Application Not Responding) is triggered in Android when using a Gesture in FlatList's items, iff a JS method is referenced inside a worklet (e.g. inside onEnd callback). The app needs to be restarted after the ANR (i.e. waiting does not work)

Expected behavior: no ANR is triggered. Note: the large amount of items might lag the application and impact performance hugely, but that is out of the scope of this bug

Steps to reproduce

0. Use react-native-reanimated (I'm currently testing with v2.14.4)
1. Display a FlatList with many items (I'm not sure exactly how many are needed, I tested ~5000)
2. Inside each item: reference a method from JS (e.g. to run runOnJS(someCallback)()). Only referencing the method is enough to trigger the ANR, calling the method is not necessary
3. Scroll for a while (usually beyond FlatList's windowSize) and an ANR will be triggered
4. Waiting for the app does not work (you need to restart the app to continue using it)

Here is a small code sample with the core idea (see snack for a full repro)

const Item = ({ item, callback }) => {
  const pressGesture = Gesture.Tap().onEnd(() => {
    console.log('this line breaks the app', callback);
    console.log('this line also breaks the app', callback());

    console.log('this line alone does not break the app')
  });

  return (
    <GestureDetector gesture={pressGesture}>
      <View><Text>{item}</Text></View>
    </GestureDetector>
  );
};

const data = [...] // large array

const App = () => {
  const callback = () => {}
  const renderItem = ({ item } => <Item item={item} callback={callback} /> 

  return (
    <GestureHandlerRootView>
      <FlatList data={data} renderItem={renderItem} />
    </GestureHandlerRootView>
  )
}

Snack or a link to a repository

https://snack.expo.dev/@pdpino/rngh-bug-closure

Gesture Handler version

2.9.0

React Native version

0.69.6

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Android 13

Acknowledgements

Yes

[pdpino]

Additional comments:

• I've reproduced this bug in other conditions as well:
  • Older library versions e.g. react-native-gesture-handler 2.5.0 and react-native-reanimated 2.9.1 (this can be tested directly in the snack)
  • Bare react-native app (running in Android)
  • Running in production
• Using .runOnJS(true) prevents the bug
  • One then might think this is a rn-reanimated issue, but I'm not able to trigger the ANR using worklets without a Gesture, e.g. I cannot reproduce in this snack
  • Lmk if this bug belongs to react-native-reanimated instead
• I attach adb logcat logs: repro-snack.log

[pdpino]

Some context on the actual app (in case it's useful):

• We want to detect gestures inside each item, e.g. press, long press, drag and drop
• Upon interactions, each item behaves roughly the same way, e.g. on press I would like to trigger onPress(thePressedItem)
• Only one item can be interacted with at the same time, i.e. using two fingers to press two items at the same time is not supported (if the user does press with two fingers, only one of the items receiving the touch is fine)
• The amount of items might be large (>100, >1000 in some cases), though they are not displayed at the same time (i.e. we can use a small windowSize in FlatList)
• For now, we are allowing the list to be laggy (we are improving that separately). But we want to get rid of the ANR
• The current design consists of a GestureDetector inside each item. I'm not aware whether there is a more performant solution (e.g. one global Gesture outside the list)

[j-piasecki]

Hi! While I was able to quite easily reproduce it using your snack, I wasn't able to when using Reanimated 3.0.0-rc.10. It includes a new implementation of shareable values so I doubt that it will be backported to Reanimated 2. I would recommend upgrading it if possible.

[pdpino]

@j-piasecki thanks for checking this out!

Is there a solution for reanimated 2? Upgrading is not possible for now (this is for a package, so users have different versions) (reanimated 3 is still in RC state).

Any pointers as to why it happens? I suspect it might have to do with mounting and dismounting components, combined with the FlatList internal virtualization (disclaimer: I'm not familiar with RNGH or reanimated code)

[j-piasecki]

Is there a solution for reanimated 2?

Unfortunately, I don't think so 😞.

Any pointers as to why it happens?

From a brief profiling session, it seems like Reanimated gets deadlocked. Fixing problems like that was one of the main points of the new implementation.

[pdpino]

Fair enough. Thanks, @j-piasecki!