Shoutem ListView - onLoadMore does not stop loading

Question

According to the documentation the ListView's onLoadMore() callback should only be triggered, when "the ListView is scrolled all the way to the bottom of the first page".

I do have the following implementation and the problem is that the ListView just does not stop calling the onLoadMore callback even without scrolling down the page. This is not an acceptable solution, because it just loads so much data when the view is open a while, that it gets unresponsive.

The code looks like the following:

<ListView
    data={this.state.posts}
    renderRow={this.renderRow}
    loading={this.state.loading}
    onLoadMore={this.onFeedLoadMore}
/>

...

onFeedLoadMore() {
      console.log("onFeedLoadMore called");

      this.setState({loading: true});

      if (_.has(this.state.paging, 'next')) {
        fetch(this.state.paging.next, {
          method: 'GET',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          }
        }).then((response) => response.json()).then((responseJson) => {
          this.setState({loading: false});
          console.log(responseJson);

          this.setState({paging: responseJson.paging});
          this.setState({posts: this.state.posts.concat(responseJson.data)})

        }).catch((error) => {
          this.setState({loading: false});
          console.log("error fetching paged fb newsfeed: ", error);
        })
      }
}

Answer 1

If you have your ListView inside a ScrollView, move it out. This is a known issue with RN's onEndReached callback in this scenario.