How to implement pull up to load more in React Native using ListView for Android?

react-native

Solution

To achieve infinite scroll on `ListView` you can use `onEndReached` and `renderFooter` from `ListView` component. It could looks like this (you just `renderFooter` when `onEndReached` is triggered)

onEndReached() {
    if (!this.state.waiting) {
        this.setState({waiting: true});
        this.fetchData() // fetching new data, ended with this.setState({waiting: false});
    }
}

renderFooter() {
    if (this.state.waiting) {
        return <ActivityIndicator />;
    } else {
        return <Text>~</Text>;
    }
}

render() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={this.renderRow}
      renderFooter={this.renderFooter}
      onEndReached={this.onEndReached}
    />);
}

Another way is to use some of libraries:

- https://github.com/exponentjs/react-native-infinite-scroll-view

- https://github.com/FaridSafi/react-native-gifted-listview

I tried with remobile, but it was deprecated (and too complicated, you have to implement about 4-5 method to satisfy this component). I used FaridSafi, it's ok but refresh is on click, not on pull.

Problem

Original source