React Native RefreshableListView (remobile)
A awesome pull-down-refresh and pull-up-loadmore listview
Installation
npm install @remobile/react-native-refresh-infinite-listview --saveUsage
Example
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
View,
Text,
StyleSheet,
ListView
} = ReactNative;
var TimerMixin = require('react-timer-mixin');
var RefreshInfiniteListView = require('@remobile/react-native-refresh-infinite-listview');
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
module.exports = React.createClass({
mixins: [TimerMixin],
data: {index: 0, maxIndex:20, list:[]},
getData(init) {
var total = 5;
if (init) {
this.data.index = 0;
this.data.list = [];
total = Math.floor(Math.random()*5);
}
for (var i=0; i<total; i++) {
this.data.list[this.data.index] = "Row" + (this.data.index+1);
this.data.index++;
}
},
getInitialState() {
this.getData(true);
return {
dataSource: ds.cloneWithRows(this.data.list)
}
},
onRefresh() {
this.getData(true);
this.setTimeout(()=>{
this.list.hideHeader();
this.setState({dataSource: ds.cloneWithRows(this.data.list)});
}, 1000);
},
onInfinite() {
this.getData();
this.setTimeout(()=>{
this.list.hideFooter();
this.setState({dataSource: ds.cloneWithRows(this.data.list)});
}, 1000);
},
loadedAllData() {
return this.data.index >= this.data.maxIndex||this.data.index===0;
},
renderRow(text) {
return (
<View style={styles.row}>
<Text >
{text}
</Text>
</View>
)
},
renderSeparator(sectionID, rowID) {
return (
<View style={styles.separator} key={sectionID+rowID}/>
);
},
render() {
return (
<View style={{flex:1}}>
<View style={{height:20}} />
<RefreshInfiniteListView
ref = {(list) => {this.list= list}}
dataSource={this.state.dataSource}
renderRow={this.renderRow}
renderSeparator={this.renderSeparator}
loadedAllData={this.loadedAllData}
initialListSize={30}
scrollEventThrottle={10}
style={{backgroundColor:'transparent'/*,top:100, left:10, width:200, height:300, position:'absolute'*/}}
onRefresh = {this.onRefresh}
onInfinite = {this.onInfinite}
>
</RefreshInfiniteListView>
</View>
)
}
});
var styles = StyleSheet.create({
row: {
height:60,
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
list: {
alignSelf:'stretch'
},
separator: {
height: 1,
backgroundColor: '#CCC'
},
});Screencasts
Props
footerHeight:numberif you need use infinite with custom, must set footerHeightpullDistance:numberset pull distance, default is 50renderEmptyRow:func
renderEmptyRow: () => {
return (
<View style={{height:Dimensions.get('window').height, justifyContent:'center',alignItems:'center'}}>
<Text style={{fontSize:40, fontWeight:'800', color:'red'}}>
have no data
</Text>
</View>
)
},renderHeaderRefreshIdle:func
renderHeaderRefreshIdle: () => {return (
<View style={{flex:1, height:DEFAULT_HF_HEIGHT, justifyContent:'center', alignItems:'center'}}>
<Text style={styles.text}>
pull down refresh...
</Text>
<Image
source={require('./pull_arrow.png')}
resizeMode={Image.resizeMode.stretch}
style={styles.image}
/>
</View>
)},renderHeaderWillRefresh:func
renderHeaderWillRefresh: () => {return (
<View style={{height:DEFAULT_HF_HEIGHT, justifyContent:'center', alignItems:'center'}}>
<Text style={styles.text}>
release to refresh...
</Text>
<Image
source={require('./pull_arrow.png')}
resizeMode={Image.resizeMode.stretch}
style={[styles.image, styles.imageRotate]}
/>
</View>
)},renderHeaderRefreshing:func
renderHeaderRefreshing: () => {return (
<View style={{height:DEFAULT_HF_HEIGHT, justifyContent:'center', alignItems:'center'}}>
<Text style={styles.text}>
refreshing...
</Text>
<ActivityIndicatorIOS
size='small'
animating={true}/>
</View>
)},renderHeaderRefreshing:func
renderFooterInifiteIdle: () => {return (
<View style={{height:DEFAULT_HF_HEIGHT, justifyContent:'center', alignItems:'center'}}>
<Image
source={require('./pull_arrow.png')}
resizeMode={Image.resizeMode.stretch}
style={[styles.image, styles.imageRotate]}
/>
<Text style={styles.text}>
pull up to load more...
</Text>
</View>
)},renderFooterWillInifite:func
renderFooterWillInifite: () => {return (
<View style={{height:DEFAULT_HF_HEIGHT, justifyContent:'center', alignItems:'center'}}>
<Image
source={require('./pull_arrow.png')}
resizeMode={Image.resizeMode.stretch}
style={styles.image}
/>
<Text style={styles.text}>
release to load more...
</Text>
</View>
)},renderFooterInifiting:func
renderFooterInifiting: () => {return (
<View style={{height:DEFAULT_HF_HEIGHT, justifyContent:'center', alignItems:'center'}}>
<ActivityIndicatorIOS
size='small'
animating={true}/>
<Text style={styles.text}>
loading...
</Text>
</View>
)},renderFooterInifiteLoadedAll:func
renderFooterInifiteLoadedAll: () => { return (
<View style={{height:DEFAULT_HF_HEIGHT, justifyContent:'center', alignItems:'center'}}>
<Text style={styles.text}>
have loaded all data
</Text>
</View>
)},onRefresh:func
onRefresh: () => {
console.log("onRefresh");
},onInfinite':func
onInfinite: () => {
console.log("onInfinite");
}loadedAllData':func
loadedAllData: () => {
return false;
}