React Native ListView onEndReached keeps firing

Question

For some reason that I don't understand, my ListView keeps firing even though it's at the top of the scroll, I need to wrap it inside a ScrollView because I want my ToolBar to hide when the user scrolls down in the ListView as well.

This is the render() method's content:

<ScrollView>
    <ActivityContainer>
      <ListView
        onEndReachedThreshold={100}
        pageSize={10}
        initialListSize={20}
        onEndReached={() => {
                        console.log("fired"); // keeps firing
                      }}
        enableEmptySections={true}/>
    </ActivityContainer>
</ScrollView>

Also tried wrapping the Whole thing in a view like this:

<ScrollView>
   <View>
    <ActivityContainer>
      <ListView
        onEndReachedThreshold={100}
        pageSize={10}
        initialListSize={20}
        onEndReached={() => {
                        console.log("fired"); // keeps firing
                      }}
        enableEmptySections={true}/>
    </ActivityContainer>
   </View>
</ScrollView>

Edit: I don't need renderHeader because I'm trying to scroll through everything on top of the ListView, it has many components and views and child views, not the header of the list view.

Answer 1

See if this works:

<ListView
  onEndReachedThreshold={100}
  pageSize={10}
  renderHeader={() => <ToolbarAndroid />}
  initialListSize={20}
  onEndReached={() => {
    console.log("fired"); // keeps firing
  }}
  enableEmptySections={true}/>

Answer 2

Use a hash for paging in ListView when > 1 column

Currently, I'm on React Native v44 but haven't tried latest version.

In your constructor try this...

constructor(props) {
  this.pagesLoaded = {}
  this.currentPage = 1
  // etc
}

Then in your data fetching method try this...

getData() {
  if (this.pagesLoaded[this.state.currentPage]) return
  this.pagesLoaded[this.state.currentPage] = true
  // fetch data
}

This way when onEndReached is over-fired, it won't matter. This seems like a bug in ListView as I had set the dimensions around it and did not have it within a ScrollView so it was happening purely within the component, even if setting getItemLayout prop.