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.

lalkmim · Answer 1 · 2016-07-22T17:13:11.180

3

See if this works:

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

edited Jul 22 '16 at 17:13

answered Jul 22 '16 at 16:56

lalkmim

646
4
11

I imagine the reason `onEndReached` keeps firing is some problem due nesting ListView and ScrollView. Did you noticed if this stopped, even if it breaks the view? – lalkmim Jul 22 '16 at 17:15
I understood, I'm just asking if the problem of keeping firing stopped when you "unnested" both components. I understand you have two problems: the firing, and the layout. – lalkmim Jul 22 '16 at 17:41
The problem is that the Toolbar is inside an Activity container, that has the Toolbar and other components inside of it and wraps all the components, including the ListView, I can't make it the Header of the List view for that reason – Computer's Guy Jul 22 '16 at 18:06
1

This link might help you: https://github.com/react-native-community/react-native-navbar/issues/45#issuecomment-123758130 – lalkmim Jul 22 '16 at 18:34
If you polish your answer a little bit with http://stackoverflow.com/questions/36747541/finding-out-scroll-direction-in-react-native-listview-scrollview and your link, I will mark your answer as correct. – Computer's Guy Jul 22 '16 at 23:39

score 1 · Answer 2 · answered Jul 06 '17 at 17:45

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.

React Native ListView onEndReached keeps firing

2 Answers2

Use a hash for paging in ListView when > 1 column