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

[eric-om]

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.

[antzhdanov]

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.

[Aximem]

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.

[SvenJonsson]

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

[JungHsuan]

I have this as well when I reset the navigation stack by react-navigation.

[rajeshtechnospurs]

I have this as well when I reset the navigation stack by react-navigation.

I am also facing same issue, any solution found?

[joseasanchezzz91]

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

I am also facing same issue, any solution found? :-(

[zemuldo]

I have this as well when I reset the navigation stack by react-navigation.

Having the same issue and happens only on Android.

[ArturoTorresMartinez]

Same issue

[lachtos]

Still facing the same issue with a big list on newest versions of all libs.

[vbylen]

one possibility is too many nested navigators in react-navigation

[qaws5503]

I've encounter this problem too. And I solve it by not using ListEmptyComponent in DraggableFlatList, just change it to conditionally render. Not sure if it is the problem here.

// Before
<DraggableFlatList
  {...other props}
  ListEmptyComponent={<Empty />}
/>

// After
{!!data.length ?
<DraggableFlatList {...other props} /> : <Empty />
}

[hknakn]

I've encounter this problem too. And I solve it by not using ListEmptyComponent in DraggableFlatList, just change it to conditionally render. Not sure if it is the problem here.

// Before
<DraggableFlatList
  {...other props}
  ListEmptyComponent={<Empty />}
/>

// After
{!!data.length ?
<DraggableFlatList {...other props} /> : <Empty />
}

Thanks @qaws5503! This worked for me.

[vojto]

This warning has gone away for me after upgrading from 3.1.2 to 4.0.0-beta.9.

[ucheNkadiCode]

What helped me was setting enableLayoutAniationExperimental in 4.0.0.0-beta.12