ListView's onEndReached, in react native, is not working as expected

Question

This is my code for a component's render.

render() {
  let loadMore;
  let hasMore = this.props.end && this.props.photos.length < this.props.end;

  if (hasMore) {
    loadMore = (
      <View style={globalStyles.ContChild}>
        <Button
          onPress={() => this.loadMoreItems()}
          containerStyle={globalStyles.bottomButton}
          style={globalStyles.buttonText}
          >
          Load more
        </Button>
      </View>
    );
  }

  return (
    <View>
      <ListView
        dataSource={this.ds.cloneWithRows(this.props.photos)}
        renderRow={this._renderPhoto}
        contentContainerStyle={{
          flexDirection: 'row',
          flexWrap: 'wrap',
          marginLeft: 4,
        }}
        enableEmptySections={true}
        initialListSize={12}
        pageSize={12 * 3}
        onEndReached={hasMore ? (() => this.loadMoreItems()) : null}
        onEndReachedThreshold="32"
      />
      {loadMore}
    </View>
  );
}

It is intended that the ListView, when scrolled to the bottom but 32px or less, perform an additional data load.

Right now the data load works via a button labeled "Load More", as it is generated in the if-condition in the render method. The button is conditionally added inside the View component, right below the ListView.

Currently, when you click the button, the loadMore() logic is executed and loads more pictures accordingly. The loaded data is a list of pictures (the listview is a photo gallery).

I wanted to remove the button and use the when the listview is scrolled to the bottom logic, by using the onEndReached handler. Right now both logics coexist in my system, but there is a problem -or misunderstanding since I started yesterday on this project- with the onEndReached logic, even if using the threshold:

Right now the onEndReached logic is executed eagerly, on each render cycle (IIRC a new render cycle is triggered when the data changes, and the data changes on each loadMorecall), as if each render cycle considered that onEndReached should trigger. However: the listview is not scrolled to the end in any case. It is still in the very scrolling top.

My purpose: I don't want the whole pictures be loaded eagerly, but in a scroll-paginated fashion, i.e. when the scrolling bottom is reached, load more elements automatically (with no need to either press the Load More button -since I will remove that button- and no eager loading but scrolling).

My question: What am I doing wrong regarding this event and how could I fix it?

Tishad Touhidul Tishad Touhidul · Accepted Answer · 2017-04-23T09:50:35

You can try this one:

<ListView 
    ref={(listView) => { _listView = listView; }}
    dataSource={this.ds.cloneWithRows(this.props.photos)}
    renderRow={this._renderPhoto}
    contentContainerStyle={{
      flexDirection: 'row',
      flexWrap: 'wrap',
      marginLeft: 4,
    }}
    enableEmptySections={true}
    initialListSize={12}
    pageSize={12 * 3}
    onEndReached={hasMore ? (() => this.loadMoreItems()) : null}
    onEndReachedThreshold="32"
  />

I missed to use ref in my ListView, and was facing the same problem. Once I added those, my pagination is working correctly.

ListView's onEndReached, in react native, is not working as expected

1 Answers