FlatList calls `onEndReached` when it's rendered

Question

Here is render() function for my simple category list page.

Recently I added pagination for my FlatList View so when the user scrolls to the bottom, onEndReached is called in a certain point(onEndReachedThreshold value length from the bottom), and it will fetch the next categories and concatenate the categories props.

But my problem is onEndReached is called when render() is called In other words, FlatList's onEndReached is triggered before it reach the bottom.

Am I putting wrong value for onEndReachedThreshold? Do you see any problem?

return (   <View style={{ flex:1 }}>     <FlatList       data={this.props.categories}       renderItem={this._renderItem}       keyExtractor={this._keyExtractor}       numColumns={2}       style={{flex: 1, flexDirection: 'row'}}       contentContainerStyle={{justifyContent: 'center'}}       refreshControl={         <RefreshControl           refreshing = {this.state.refreshing}           onRefresh = {()=>this._onRefresh()}         />       }       // curent value for debug is 0.5       onEndReachedThreshold={0.5} // Tried 0, 0.01, 0.1, 0.7, 50, 100, 700        onEndReached = {({distanceFromEnd})=>{ // problem         console.log(distanceFromEnd) // 607, 878          console.log('reached'); // once, and if I scroll about 14% of the screen,                               //it prints reached AGAIN.          this._onEndReachedThreshold()       }}     />   </View> ) 

UPDATE I fetch this.props.categories data here

  componentWillMount() {     if(this.props.token) {       this.props.loadCategoryAll(this.props.token);     }   } 

Answer 1

Try to implement onMomentumScrollBegin on FlatList :

constructor(props) {     super(props);     this.onEndReachedCalledDuringMomentum = true; } 

...

<FlatList     ...     onEndReached={this.onEndReached.bind(this)}     onEndReachedThreshold={0.5}     onMomentumScrollBegin={() => { this.onEndReachedCalledDuringMomentum = false; }} /> 

and modify your onEndReached

onEndReached = ({ distanceFromEnd }) => {     if(!this.onEndReachedCalledDuringMomentum){         this.fetchData();         this.onEndReachedCalledDuringMomentum = true;     } } 

Answer 2

First check if the FlatList is inside a ScrollView or Content of native-base. Then take it outside of it Actually you don't need to use Content or ScrollView, as FlatList has both ListFooterComponent and ListHeaderComponent.

Though it is not recommended, if you really need to use Flatlist inside ScrollView, then take a look at this answer: https://stackoverflow.com/a/57603742/6170191