react-native-refresher
v0.1.1
Published
A React Native pull to refresh ListView completely written in js. Also supports custom animations.
Downloads
14
Maintainers
Readme
A pull to refresh ListView for React Native completely written in js. Also supports custom animations.
Installation
npm install react-native-refresher --save
Usage
var React = require('react-native');
// Loading the refresher ListView and Indicator
var {
RefresherListView,
LoadingBarIndicator
} = require('react-native-refresher');
var {
AppRegistry,
Text,
View,
ListView,
} = React;
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>
);
}
};
Examples
Props
threshold: number
The amount of pixeles to validate the refresh. By default the theshold will be calculated by the header height.minTime: number
The minimum amount of time for showing the loading indicator while is refreshing. Default 320ms.onRefresh: func.isRequired
Called when user pulls listview down to refresh.indicator: oneOfType([element])
React Element. See example of a custom indicatorrefreshOnRelease: bool
If is necessary to release touch for refresh or refresh will be done automatically once threshold is passed.listStyle: style
The list style
Credits
Refresher is created by Syrus Akbary and inspired by Refresher and react-native-refreshable-listview. If you have suggestions or bug reports, feel free to send pull request or create new issue.