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

Question

It's like the opposite of pull down to refresh. ListView on Android does not support bounces.

Answer 1

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.