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"
/>
);
},
});