A pull to refresh ListView for React Native

We already covered Components that implement a pull to refresh ListView, Syrus Akbary indeed has been inspired by Refresher and react-native-refreshable-listview for his own Component that also supports custom animations.

react-native-refresher on GitHub

A pull to refresh ListView for React Native completely written in js. Also supports custom animations.

class Content extends React.Component {
  constructor() {
    super();
    this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      dataSource: this.ds.cloneWithRows(["Row 1", "Row 2"]),
    };
  }
  onRefresh() {
    // You can either return a promise or a callback
    this.setState({
      dataSource: this.fillRows(["Row 1", "Row 2", "Row 3", "Row 4"]),
    });
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <RefresherListView
          dataSource={this.state.dataSource}
          onRefresh={this.onRefresh.bind(this)}
          indicator={<LoadingBarIndicator />}
          renderRow={(rowData) => (
            <View
              style={{
                padding: 10,
                borderBottomColor: "#CCCCCC",
                backgroundColor: "white",
                borderBottomWidth: 1,
              }}
            >
              <Text>{rowData}</Text>
            </View>
          )}
        />
      </View>
    );
  }
}

Bar IndicatorReact Native Playground iOS app