React Native - Android PullToRefresh ListView

Question

Does anyone know how to implement a listview refresher for android in React-Native? I think this is a common problem a lot of people have.

There is react-native-refreshable-listview , but it does not support android.

Answer 1

You should be able to accomplish this behavior by using the PullToRefreshViewAndroid ( https://facebook.github.io/react-native/docs/pulltorefreshviewandroid.html#content ) launched with React Native 0.16.

As mentioned in this issue: https://github.com/facebook/react-native/issues/4793 , you might have to use style={{flex: 1}} on the PullToRefreshView to achieve the result you want, something like this:

<PullToRefreshViewAndroid
  refreshing={isRefreshing}
  onRefresh={this.onRefresh}
  style={{ flex: 1 }}>
  <ListView
    ...listViewProps />
</PullToRefreshViewAndroid>

Then you should get the same behaviour as ReactNativeRefreshableListView gives you, but on Android.

Answer 2

React-native has an out of the box solution for pull to refresh

<ListView
      refreshControl={
        <RefreshControl
          refreshing={this.state.refreshing}
          onRefresh={this.onRefresh.bind(this)}
        />
      }
      ...
      dataSource={this.state.dataSource}
/>

and elsewhere in your class, an onRefresh() function...

onRefresh() {
  this.setState({refreshing:true});
  //refresh data and set refreshing to false as appropriate for your app...
}