react-native-draggable-flatlist: Getting many "Excessive number of pending callbacks: 501" errors

Just migrated from 1.1.7 to 2.0.10, and now (mostly triggered by scrolling in my experience so far) I’m getting this warning:

Warning: Please report: Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {
"66781":{"module":"ReanimatedModule","method":"getValue"},
"66784":{"module":"ReanimatedModule","method":"getValue"},
"66787":{"module":"ReanimatedModule","method":"getValue"},
"66791":{"module":"ReanimatedModule","method":"getValue"},
"66794":{"module":"ReanimatedModule","method":"getValue"},
"66797":{"module":"ReanimatedModule","method":"getValue"},
"66800":{"module":"ReanimatedModule","method":"getValue"}, ...

I’m using

"react-native": "0.61.4",
"react-native-reanimated": "~1.4.0",
"react-native-gesture-handler": "~1.5.0",

with expo sdk 36 This is my list setup:

<DraggableFlatlist
  onRef={ref => (this.tasksList = ref)}
  style={{ flex: 1 }}
  data={tasks}
  initialNumToRender={10}
  keyExtractor={task => `${task.id}`}
  renderItem={this.renderItem}
  extraData={this.props}
  keyboardShouldPersistTaps="handled"
  onRefresh={this.onRefresh}
  refreshing={refreshing}
  ItemSeparatorComponent={() => <ItemSeparator projectView={projectView} />}
  onEndReached={this.fetchNextPage}
  onEndReachedThreshold={0.5}
  ListFooterComponent={this.renderFooter}
/>

...

renderItem = ({ item, index, drag, isActive }) => {
  const props = {
    key: item.id,
    task: item,
    onLongPress: drag,
    index,
    ...otherPropsOmittedForClarity
  }
  return (
    <View
      style={isActive ? styles.draggingRow : {}}
      pointerEvents={isActive ? 'none' : 'auto'}
    >
      <TaskRow {...props} />
    </View>
  )
}

Not sure if it’s related, but I am also getting a bunch of ## can't measure (key) reason: no ref for tasks after the initial 10 (I log the key if we’re trying to measure), and if I remove initialNumToRender I get in between 20-25 before the “can’t measure” shows up.

The list items are variably sized tasks, where TaskRow is a <View> wrapping an animated View with gesture handlers for swiping left/right. Other than that, the items are pretty straightforward, I don’t think I’m doing anything novel that warrants weird behavior like excessive pending callbacks.

Happy to provide more details as needed, I’m a huge reanimated fan so I’m very excited to see this library be written with it. Thanks for all your hard work!

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 5
Comments: 16 (4 by maintainers)

Most upvoted comments

@eric-om when you call the renderItem in props just do something like
{ ...props, index: keyToIndex.get(itemKey) || listIndex }

Hi @dereknelson, could you maybe explain this with a little more context? I am currently running into similar issues and I am not able to completely follow your solution steps - would it be possible to see the entire file / code base - or is it a private app? Anyways - I would really appreciate your help!

Thanks!

maks-io on Aug 23, 2020

@computerjazz not sure why I made it way more complicated than it had to be with the above solutions, I passed an “listIndex” where the index passed to the item is keyToIndex.get(itemKey) || listIndex

dereknelson on Jan 13, 2020

I have two proposed solutions:

adding a this.setState after onNextFrame in componentDidUpdate such that the items are at least guaranteed to rerender with the index, and returning null in <RowItem /> so that people who rely on the index for rendering logic don’t have crashes/unpredictable behavior
doing something in render like

renderItem = () => {
...
if (!this.keyToIndex.get(itemKey)) this.keyToIndex.set(itemKey)
return (
...
)
}

but I don’t like doing things with side effects in render

Going to try to the first solution and let you know if I get any weird behavior

dereknelson on Jan 13, 2020

@computerjazz hoping to get you a snack repro by tuesday, otherwise it’ll be at some point next week. I’ll check out your swipeable item library, thanks!

dereknelson on Jan 12, 2020

Thanks for the writeup, if you can provide a repro snack that would be awesome.

There was also an animation bug when row items were not all the same size – I just released 2.0.11 which should fix it. However, the bug was related to calculating which row is currently hovered-over and doesn’t sound related to what you describe above.

Also, I recently released a swipeable item component that may be useful to you: https://github.com/computerjazz/react-native-swipeable-item/blob/master/README.md

computerjazz on Jan 12, 2020