react-native-smart-pull-to-refresh-listview
A smart pull-down-refresh and pull-up-loadmore react-native listview, for ios, written in pure JS, for android, written in JS and Java.
This component is compatible with React Native 0.25 and newer.
Preview
Advanced Features
- Flexible pull to refresh control for ios and android,
easy to customize the 'RefreshView' style and content, bounce effect for both pull down refresh and pull up load more, if you want, you can also use the 'autoLoad' mode for pull up load more. demonstration
- Memory management for ios and android,
if you want, the listRow can remove its children to release memory when its position is outside viewport of device, and will undo when its position is inside viewport of device. demonstration
- Extended support sticky header for android
it also supports sticky header with pull to refresh demonstration
Installation
npm install react-native-smart-pull-to-refresh-listview --save
Installation (Android)
- In
android/settings.gradle
...
include ':react-native-smart-swipe-refresh-layout'
project(':react-native-smart-swipe-refresh-layout').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-pull-to-refresh-listview/android')
- In
android/app/build.gradle
...
dependencies {
...
// From node_modules
compile project(':react-native-smart-swipe-refresh-layout')
}
- In MainApplication.java
...
import com.reactnativecomponent.swiperefreshlayout.RCTSwipeRefreshLayoutPackage; //import package
...
/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RCTSwipeRefreshLayoutPackage() //register Module
);
}
...
-
If you're using react-native 0.30-, follow these extra steps
-
In node_modules/react-native-smart-pull-to-refresh-listview/android/src/main/java/com/reactnativecomponent/swiperefreshlayout/
-
In TouchEvent.java
... public TouchEvent(int viewTag, long timestampMs, int movement) { super(viewTag, timestampMs); //for older version //super(viewTag); //for newer version this.movement = movement; } ...
-
In TouchUpEvent.java
... public TouchUpEvent(int viewTag, long timestampMs) { super(viewTag, timestampMs); //for older verion //super(viewTag); //for newer version } ...
-
-
Full Demo
Usage
// 构造 { superprops; this_dataSource = r1 !== r2 //sectionHeaderHasChanged: (s1, s2) => s1 !== s2, ; let dataList = thisstate = first: true dataList: dataList dataSource: this_dataSource } { this_pullToRefreshListView } //Using ListView { return <PullToRefreshListView ref= this_pullToRefreshListView = component viewType=PullToRefreshListViewconstantsviewTypelistView contentContainerStyle=backgroundColor: 'yellow' style=marginTop: PlatformOS == 'ios' ? 64 : 56 initialListSize=20 enableEmptySections=true dataSource=thisstatedataSource pageSize=20 renderRow=this_renderRow renderHeader=this_renderHeader renderFooter=this_renderFooter //renderSeparator={(sectionID, rowID) => <View style={styles.separator} />} onRefresh=this_onRefresh onLoadMore=this_onLoadMore pullUpDistance=35 pullUpStayDistance=50 pullDownDistance=35 pullDownStayDistance=50 /> } { return <View style=stylesthumbnail> <View style=stylestextContainer> <Text>rowDatatext</Text> </View> </View> } { let pullState pullDistancePercent = viewState let refresh_none refresh_idle will_refresh refreshing = PullToRefreshListViewconstantsviewState pullDistancePercent = Math } { let pullState pullDistancePercent = viewState let load_more_none load_more_idle will_load_more loading_more loaded_all = PullToRefreshListViewconstantsviewState pullDistancePercent = Math } { //console.log('outside _onRefresh start...') //simulate request data this } { //console.log('outside _onLoadMore start...') this } { return ActivityIndicator ? <ActivityIndicator style=marginRight: 10 animating=true color='#ff0000' size='small'/> : PlatformOS == 'android' ? <ProgressBarAndroid style=marginRight: 10 color='#ff0000' styleAttr='Small'/> : <ActivityIndicatorIOS style=marginRight: 10 animating=true color='#ff0000' size='small'/> } const styles = StyleSheet PullToRefreshListViewDemo
Props
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
...ListView.propTypes | see react-native documents | |||
viewType | enum | Yes | Symbol | determines the viewType which will be used(ScrollView, ListView) |
autoLoadMore | bool | Yes | false | when the value is true, pull up load more will be auto |
onRefresh | func | Yes | when refreshing, this function will be called | |
onLoadMore | func | Yes | when loadingMore, this function will be called | |
onEndReachedThreshold | number | Yes | 0 | threshold in pixels (virtual, not physical) for calling onLoadMore |
pullUpDistance | number | Yes | 35 | determines the pull up max distance |
pullUpStayDistance | number | Yes | 50 | determines the pull up stay distance |
pullDownDistance | number | Yes | 35 | determines the pull down max distance |
pullDownStayDistance | number | Yes | 50 | determines the pull down stay distance |
enabledPullUp | bool | Yes | true | when the value is false, pull up load more will be disabled |
enabledPullDown | bool | Yes | true | when the value is false, pull down refresh will be disabled |
listItemProps | object | Yes | see react-native documents | |
renderRowWithVisibility | bool | Yes | when the value is true, the children of the listRow can be controlled with 'hidden' state | |
pageTop | number | Yes | 0 | determines the top relative to the page of the float section header(sticky header) view |
floatSectionHeaderWidth | number | Yes | deviceWidth | determines the width of the float section header(sticky header) view |
renderFloatSectionHeader | number | Yes | 0 | determines the width of the float section header(sticky header) view |
listSectionProps | object | Yes | see react-native documents |
Special Props
-
listItemProps: when set this prop, listView will use special 'listRow', the listRow will remove its children to release memory when its position is outside viewport of device, and will undo when its position is inside viewport of device. Usually it is used with 'react-native-smart-image-loader'
-
renderRowWithVisibility: when the value is true, the children of the listRow can be controlled with 'hidden' state. This prop is valid when 'listItemProps' is being set, and it is only valid for android. Usually it is used with 'react-native-smart-image-loader'
-
pageTop, floatSectionHeaderWidth, renderFloatSectionHeader, listSectionProps are used for android to support ios-like sticky header
Method
- beginRefresh(bounceDisabled): force begin pull down refresh, if bounceDisabled is true, the bounce animation will be disabled
- endRefresh(bounceDisabled): end pull down refresh, if bounceDisabled is true, the bounce animation will be disabled
- endLoadMore: end pull up load more