FlatList onEndReached being called multiple times [duplicate]

Answer 1

This solution worked for me. Add onMomentumScrollBegin and modify onEndReached in FlatList Component.

<FlatList
style = { ...}
data = {data}
initialNumToRender = {10}
onEndReachedThreshold = {0.1}
onMomentumScrollBegin = {() => {this.onEndReachedCalledDuringMomentum = false;}}
onEndReached = {() => {
    if (!this.onEndReachedCalledDuringMomentum) {
      this.retrieveMore();    // LOAD MORE DATA
      this.onEndReachedCalledDuringMomentum = true;
    }
  }
}
/>

Answer 2

you can disable scrolling while data receiving. in FlatList set scrollEnabled false while data loading.

scrollEnabled={!this.props.loadingData}

Answer 3

You just need to set onEndReachedThreshold as a rate of visibleLength. So you just need to set it as a number smaller than 1. ZERO for example or 0.5 then it should work!!!!!

Let me know if that worked for you.

Answer 4

Here is how I solved my problem:

Here is my initial state:

state = {
  onEndReachedCalledDuringMomentum: true,
  lastLoadCount: 0,
}

This is my FlatList

<FlatList
   keyboardShouldPersistTaps="always"
   style={...}
   data={this.state.searchResults}
   extraData={this.state}
   bounces={false}
   renderItem={({ item, index }) =>
         <SearchResultView
            uriSsource={item.image}
            itemIndex={index}
            name={item.name}
          />
   }
   showsVerticalScrollIndicator={false}
   keyExtractor={this._keyExtractor}
   numColumns={2}
   onEndReached={() => this._loadMoreData()}
   onEndReachedThreshold={0.01}
   ListFooterComponent={this._renderSearchResultsFooter}
   onMomentumScrollBegin={() => this._onMomentumScrollBegin()}
/>

Here are the functions I am calling:

// Key Extractor
    _keyExtractor = (item, index) => item.id;
// Check if list has started scrolling
    _onMomentumScrollBegin = () => this.setState({ onEndReachedCalledDuringMomentum: false });
// Load more data function
    _loadMoreData = () => {
            if (!this.state.onEndReachedCalledDuringMomentum) {
                this.setState({ onEndReachedCalledDuringMomentum: true }, () => {

                    setTimeout(() => {
                        if (this.state.lastLoadCount >= 20 && this.state.notFinalLoad) {
                            this.setState({

                                page: this.state.page + 1,
                            }, () => {
                                // Then we fetch more data;
                                this._callTheAPIToFetchMoreData();
                            });
                        };
                    }, 1500);
                });
            };
        };
// Show your spinner
    _renderSearchResultsFooter = () => {
            return (
                (this.state.onEndReachedCalledDuringMomentum && this.state.lastLoadCount >= 20 && this.state.notFinalLoad) ?
                    <View style={{ marginBottom: 30, marginTop: -50, alignItems: 'center' }}>
                        <ActivityIndicator size="large" color="#e83628" />
                    </View> : null
            )
        }

Once I get data, inside of _callTheAPIToFetchMoreData(), I update the state like this:

this.setState({
  lastLoadCount: results.length,
  onEndReachedCalledDuringMomentum: results.length >= 20 ? true : false,
  notFinalLoad: results.length >= 20 ? true : false
}

Happy coding.

Answer 5

onEndReached is called much times, use onMomentumScrollEnd instead to load lazy data.

<FlatList
  data={data}
  keyExtractor={item => item.uid}
  onMomentumScrollEnd={retrieveData}
  onEndReachedThreshold={0}
/>

Answer 6

The reason of triggering onEndReached multiple times is because you have not set initialNumToRender properly.

onEndReached is triggered in this _maybeCallOnEndReached in VirtualizedList.

  _maybeCallOnEndReached() {
    const {
      data,
      getItemCount,
      onEndReached,
      onEndReachedThreshold,
    } = this.props;
    const {contentLength, visibleLength, offset} = this._scrollMetrics;
    const distanceFromEnd = contentLength - visibleLength - offset; 
    if (
      onEndReached &&
      this.state.last === getItemCount(data) - 1 &&
      distanceFromEnd < onEndReachedThreshold * visibleLength &&
      (this._hasDataChangedSinceEndReached ||
        this._scrollMetrics.contentLength !== this._sentEndForContentLength)
    ) {
    ...

if contentLength(the length of content rendered at once) and visibleLength(usually the screen height) is close, distanceFromEnd can be very small, thus distanceFromEnd < onEndReachedThreshold * visibleLength can always be true. By setting initialNumToRender and control the size of contentLength, you can avoid unnecessary onEndReached call.

Here's an example. If you render 10 items(this is the default props of initialNumToRender) of 70 px cells at the initial render, contentLength becomes 700. If the device you are using is iPhoneX then visibleLength is 724. In that case distanceFromEnd is 24 and this will trigger onEndReached unless you set onEndReachedThreshold less than 0.03.