React Native RefreshableList
A awesome pull-down-refresh and pull-up-loadmore listview
This is an updated version of this repo with ES6 Class component: https://github.com/remobile/react-native-refresh-infinite-listview
Todo
- Migrate to FlatList component
Installation
npm install react-native-refresh-infinite-list --save
or
yarn add react-native-refresh-infinite-list
Usage
Example
'use strict'; ;;;; var ds = r1 !== r2;Component static mixins: TimerMixin; static data: index: 0 maxIndex:20 list:; { superprops; this; thisstate = dataSource: ds thisonRefresh = thisonRefresh; thisonInfinite = thisonInfinite; thisloadedAllData = thisloadedAllData; thisrenderRow = thisrenderRow; thisrenderSeparator = thisrenderSeparator; } { var total = 5; if init thisdataindex = 0; thisdatalist = ; total = Math; for var i=0; i<total; i++ thisdatalistthisdataindex = "Row" + thisdataindex+1; thisdataindex++; } { this; this; } { this; this; } { return thisdataindex >= thisdatamaxIndex||thisdataindex===0; } { return <View style=stylesrow> <Text > text </Text> </View> } { return <View style=stylesseparator key=sectionID+rowID/> ; } { return <View style=flex:1> <View style=height:20 /> <RefreshInfiniteListView ref = {thislist= list} dataSource=thisstatedataSource renderRow=thisrenderRow renderSeparator=thisrenderSeparator loadedAllData=thisloadedAllData initialListSize=30 scrollEventThrottle=10 style=backgroundColor:'transparent'/*,top:100, left:10, width:200, height:300, position:'absolute'*/ onRefresh = thisonRefresh onInfinite = thisonInfinite > </RefreshInfiniteListView> </View> }; var styles = StyleSheet;
Screencasts
Props
footerHeight:number
if you need use infinite with custom, must set footerHeightpullDistance:number
set pull distance, default is 50renderEmptyRow:func
{ return <View style=height:Dimensionsheight justifyContent:'center'alignItems:'center'> <Text style=fontSize:40 fontWeight:'800' color:'red'> have no data </Text> </View> }
renderHeaderRefreshIdle:func
{return <View style=flex:1 height:DEFAULT_HF_HEIGHT justifyContent:'center' alignItems:'center'> <Text style=stylestext> pull down refresh... </Text> <Image source= resizeMode=ImageresizeModestretch style=stylesimage /> </View> }
renderHeaderWillRefresh:func
{return <View style=height:DEFAULT_HF_HEIGHT justifyContent:'center' alignItems:'center'> <Text style=stylestext> release to refresh... </Text> <Image source= resizeMode=ImageresizeModestretch style=stylesimage stylesimageRotate /> </View> }
renderHeaderRefreshing:func
{return <View style=height:DEFAULT_HF_HEIGHT justifyContent:'center' alignItems:'center'> <Text style=stylestext> refreshing... </Text> <ActivityIndicatorIOS size='small' animating=true/> </View> }
renderHeaderRefreshing:func
{return <View style=height:DEFAULT_HF_HEIGHT justifyContent:'center' alignItems:'center'> <Image source= resizeMode=ImageresizeModestretch style=stylesimage stylesimageRotate /> <Text style=stylestext> pull up to load more... </Text> </View> }
renderFooterWillInifite:func
{return <View style=height:DEFAULT_HF_HEIGHT justifyContent:'center' alignItems:'center'> <Image source= resizeMode=ImageresizeModestretch style=stylesimage /> <Text style=stylestext> release to load more... </Text> </View> }
renderFooterInifiting:func
{return <View style=height:DEFAULT_HF_HEIGHT justifyContent:'center' alignItems:'center'> <ActivityIndicatorIOS size='small' animating=true/> <Text style=stylestext> loading... </Text> </View> }
renderFooterInifiteLoadedAll:func
{ return <View style=height:DEFAULT_HF_HEIGHT justifyContent:'center' alignItems:'center'> <Text style=stylestext> have loaded all data </Text> </View> }
onRefresh:func
{ console; }
onInfinite':func
{ console; }
loadedAllData':func
{ return false; }