A pull-to-refresh ListView which shows a loading spinner while your data reloads
In action (from ReactNativeHackerNews):
loadData: func.isRequired: a function returning a promise or taking a callback, invoked upon pulldown. spinner will show until the promise resolves or the callback is called.refreshDescription: oneOfType([string, element]): text/element to show alongside spinner.minDisplayTime: numberminBetweenTime: numberminPulldownDistance: numberactivityIndicatorComponent: funcstylesheet: objectonScroll: func
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" /> ) } })- 0.3.0 added some new props, fixed bug where refresh could happen twice