React-native: onEndReached fired again and again

[bluesky0109]

`render() {
return (
{this._renderStoreInfo()}
{this._renderOperatesView()}

contentContainerStyle={styles.list}
dataSource={this.state.dataSource}
renderRow={(rowData, sectionID, rowID) => this._renderRow(rowData, rowID)}
renderFooter={this._renderFooter.bind(this)}
onEndReached={this._onEndReached.bind(this)}
onEndReachedThreshold={10} />

);
}

_onEndReached(){
console.log('\n\n onEndReached \n\n');
//正在加载中
if (!this.hasMore || this.state.isLoadingTail) {
// We're already fetching or have all the elements so noop
return;
}

this.setState({
  curpage: this.state.curpage + 1,
  isLoadingTail: true,
});

this.getGoodsList();

}`
I nesting ListView in ScrollView, when load data onEndReached fired then load next page dada，when next page data load，onEndReached fired again，but i do not scroll the ListView or ScrollView，if i delete scrollview of outside，fire onEndReached need scoll the listview to bottom，it is correct，but i need nesting listview in scrollview。

[vanBrunneren]

I had the same problem / issue like you. I think this is because there are two "scrolls" at the same place and it's not possible to trigger the onEndReached. Maybe someone can give a detailed answer to this question.

I changed my setup and displayed all of my data in one big ListView. This had multiple benefits. Now I have all my components in one list and don't have to care about different components, the onEndReached Function works perfect and a support for StickyHeaders is enabled. Maybe you can explain a bit more what you are exactly want to do, so we can talk about a detailed example.

[Emilios1995]

I had the same problem, even with a regular view, as I describe in this question http://stackoverflow.com/questions/34669673/listviews-onendreached-not-working-when-inside-a-view
And as I answered there, the renderFooter function came in handy as a workaround.

[bluesky0109]

I change nesting ListView in ScrollView to use only a ListView，and then other component as header of listview，it worked fine。

[farzer]

I met the same problem, and I also ask for help in http://stackoverflow.com/questions/36347396/react-native-listview-component-auto-run-onendreached-function-although-my-scrol.

can you give me some help?

@bluesky0109 @Emilios1995 @vanBrunneren

thanks a lot.

[longsangstan]

I have the same problem as well, and my list view isn't inside a scroll view.

[mschipperheyn]

Well, a quick fix is to debounce the resulting function call using lodash debounce

[CorinneKelly]

if you set an exact height for the nested ScrollView, onEndReached will work as intended, otherwise the nested scrollview assumes that all items in the list are visible causing your onEndReached function to trigger nonstop.

[DavitVosk]

@CorinneKelly Yes, you are right. Giving a fixed height to the wrapper View fixes the problem. But this is a bug and hence this issue should be reopened. @bluesky0109 please reopen it. Thanks

[fourcolors]

This is still an issue for me. Using FlatList and its triggering over and over again

[0011001011]

Still an issue for me as well

[flyinghawker]

issue exists for me as well

[ansonyao]

Hey guys, I managed to get around this issue by setting onEndReachedThreshold = {0.1}. I have two lists with same setting. One is working and one is not... Then I read through the doc again and tried onEndReachedThreshold = {0.1} and it works! I have changed my setting to everything rendered in sectionlist though. But not sure if this really matters since I did not try to put sectionlist inside scrollView