FlatList stuck in Endless onEndReached trigger on IOS, Web and Android

[olawalethefirst]

Description

I am facing an issue where the FlatList's onEndReached function gets continuously triggered even when the list is not undergoing any panning.

When using the flatlist onEndReached to implement an infinte loading feature, an unusual behavior is noticed under two unique conditions. 1 - If list height is increment during data load and reduced when not loading. This is a common practice to indicate the action of loading more content in a list. It is achieved by using a conditional footer that renders only during data load/fetch 2 - If data/content fetch is unsuccessful, meaning that on completion of the loading more action, the list length is not incremented. The footer padding added during data load is also removed from the total list length, thus, re-triggering the onEndReached function, continuing in an endless loop.

Further Findings - I believe that this unusual behavior may be because the approach used to determine if the list has been scrolled to the end relies on layout change. The reason I believe so is because without any list layout change caused by the footer (necessary to indicate fetching more content), the erratic behavior is not present. I also do not currently see the reason why we rely on layout change since we indeed are only trying to load more content upon user's scroll towards the end of a list.

Version

6.1.0

Output of npx react-native info

OS: Windows 10 10.0.19044 CPU: (4) x64 Intel(R) Core(TM) i5 CPU M 540 @ 2.53GHz Memory: 1.88 GB / 7.87 GB Binaries: Node: 16.14.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.3.0 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: Not Found IDEs: Android Studio: Not Found Visual Studio: Not Found Languages: Java: javac 17 - C:\Program Files\java\jdk-17\bin\javac.EXE npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.68.2 => 0.68.2 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Using snack link provided attached to issue;

• after launching the snack repo,
• preview the code using either of the options. ( using the web option is the easiest to preview)
• click the 'No errors' text at the bottom tab to display the console tab
• scroll to the end of the display list and wait,
• pay attention to consistent message printed by the onEndReached function provided to the FlatList.

Snack, code example, screenshot, or link to a repository

import * as React from 'react'; import { Text, View, FlatList } from 'react-native';

export default function App() { const [data, setData] = React.useState(new Array(10).fill()) const [loadingMore, setLoadingMore] = React.useState(false)

const Li = () => <View style={{height: 100, borderWidth: 1}}><Text>An Item</Text></View>

return ( <FlatList data={data} renderItem={Li} onEndReached={()=>{ setLoadingMore(true) console.log('on End triggered' + data.length) setTimeout(()=> { setLoadingMore(false) }, 3000) }} ListFooterComponent={loadingMore?<View style={{height: 50, backgroundColor: 'red'}}/>: null} /> ); }

Snack Link - https://snack.expo.dev/@olawalethefirst/e56737

[JerakRus]

https://github.com/facebook/react-native/issues/30301 related issue

Today we updated our application from version 0.66 to 0.71 and encountered a change in this behavior, which of course was very confusing.

[meteorlxy]

The reason I believe so is because without any list layout change caused by the footer (necessary to indicate fetching more content), the erratic behavior is not present

I got the same conclusion.

This should be kind of a breaking behavior. We noticed this issue after bumping to 0.71.

[ChangeSomeCode]

yep. i have same issue with infinity call onEndReached on 0.71.12

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.

[0xmtn]

Having the same issue. Anybody has found anything?