React Native RefreshableListView

James Friend has pulled out its own Pull-to-Refresh ListView component from the React Native Hacker News app, that he released a while ago, and shared it for you to use.

react-native-refreshable-listview

A pull-to-refresh ListView which shows a loading spinner while your data reloads

var React = require("react-native");
var { Text, View, ListView } = React;
var RefreshableListView = require("react-native-refreshable-listview");

var ArticleStore = require("../stores/ArticleStore");
var StoreWatchMixin = require("./StoreWatchMixin");
var ArticleView = require("./ArticleView");

var ds = new ListView.DataSource({
  rowHasChanged: (r1, r2) => r1.id !== r2.id,
});

var ArticlesScreen = React.createClass({
  mixins: [StoreWatchMixin],
  getInitialState() {
    return { dataSource: ds.cloneWithRows(ArticleStore.all()) };
  },
  getStoreWatches() {
    this.watchStore(ArticleStore, () => {
      this.setState({ dataSource: ds.cloneWithRows(ArticleStore.all()) });
    });
  },
  reloadArticles() {
    return ArticleStore.reload(); // returns a promise of reload completion
  },
  renderArticle(article) {
    return <ArticleView article={article} />;
  },
  render() {
    return (
      <RefreshableListView
        dataSource={this.state.dataSource}
        renderRow={this.renderArticle}
        loadData={this.reloadArticles}
        refreshDescription="Refreshing articles"
      />
    );
  },
});

React Native RefreshableListView