Iman Salehi
Iman Salehi

Reputation: 956

onEndReached function calls at first, before user reach to end of flat list

I want to execute a function, when user reached to end of flatList but the function is running up just on component loading before every thing:

loadMore() {

alert('YouGot to end');

}


 render() {
    return (
    <FlatList

    data={this.state.foods}
    extraData={[this.state, this.props]}
    renderItem={this._renderItem}
    onEndReached={this.loadMore()}
    onEndReachedThreshold={0}
  />

  );
 }

load more alert is showing up at first moment will when component inits at first!! and even it doesn't show again when i scroll to end of flatlist

Upvotes: 0

Views: 1048

Answers (1)

Tobias Lins
Tobias Lins

Reputation: 2651

This happens because you render the FlatList before your data is loaded.

You should check if the data is loaded and then render the List. If not it will trigger the onEndReached method because the initial list render is empty.

Upvotes: 1

Related Questions