React-native-draggable-flatlist: Some pending callbacks that might have leaked by never being called from native code: {"24342":{"module":"ReanimatedModule","method":"getValue"}, ...}

Created on 28 Jul 2020 · 7Comments · Source: computerjazz/react-native-draggable-flatlist

Describe the bug
I have a large list that is updated frequently by the user. The list behaves correctly but when I leave the screen and return to the screen, I receive an expo error saying console.error: There was a problem sending log messages to your development environment RangeError: Maximum call stack size exceeded.. I get multiple identical warnings from console. I have copied the beginning of one warning below. Usually I just get the warning message pulled up on the screen but occasionally my expo client will freeze and return to the home screen of the iPhone or iOS simulator.

I am testing my app on iOS simulator and the expo app on my iPhone.

My draggable flat list:
<DraggableFlatList showsVerticalScrollIndicator={false} data={ data } renderItem={renderItem} keyExtractor={(item, index) => index.toString()} onDragEnd={({ data, from, to }) => { // save changes to state using useContext hook }} ListHeaderComponent={renderHeader} ListFooterComponent={renderFooter} />

From expo:
console.error: There was a problem sending log messages to your development environment RangeError: Maximum call stack size exceeded.

From console:
Warning: Please report: Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {"24342":{"module":"ReanimatedModule","method":"getValue"},"24386":{"module":"ReanimatedModule","method":"getValue"},"24426":{"module":"ReanimatedModule","method":"getValue"},"24429":{"module":"ReanimatedModule","method":"getValue"},"24443":{"module":"ReanimatedModule","method":"getValue"},"24473": ...

To Reproduce

Platform & Dependencies
Please list any applicable dependencies in addition to those below (react-navigation etc).

Platform: iOS (haven't tested on Android)
React Native or Expo version: Expo 38.0.0
Reanimated version: [email protected]
React Native Gesture Handler version: [email protected]

Additional context
Add any other context about the problem here.

Source

eric-om

👍10

Most helpful comment

In my case, it seems the error happens because I display DraggableFlatList before the component is mounted. I fix it this way:

state = {
    didFinishInitialAnimation: false
};

componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
        this.setState({
            didFinishInitialAnimation: true
        });
    });
}

render() {
    const { didFinishInitialAnimation } = this.state;
    return didFinishInitialAnimation && (
        <DraggableFlatList
            ...
        />
    );
}

No more errors in logs and, also, no more lags.

Aximem on 30 Oct 2020

👍2

All 7 comments

It seems that this error comes from onUnmount callback of <RowItem/>.
For me it happened when I emptied the draggable list and fixed it by conditionally rendering the <DraggableFlatList/> when list is empty:

{queue.length && <DraggableFlatList />}

Not ideal, but works for now.

antzhdanov on 18 Oct 2020

In my case, it seems the error happens because I display DraggableFlatList before the component is mounted. I fix it this way:

state = {
    didFinishInitialAnimation: false
};

componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
        this.setState({
            didFinishInitialAnimation: true
        });
    });
}

render() {
    const { didFinishInitialAnimation } = this.state;
    return didFinishInitialAnimation && (
        <DraggableFlatList
            ...
        />
    );
}

No more errors in logs and, also, no more lags.

Aximem on 30 Oct 2020

👍2

We have this as well in combination mostly prone to happen together with react-native-swipeable-item.