react-native-sk-refreshable-listview
What is it
react-native-sk-refreshable-listview is a component wraps ListView, supports: 1 pull down to refresh 2 pull up to load more 3 scroll to top 4 scroll to bottom
How to use it
-
npm install react-native-sk-refreshable-listview@latest --save
-
Write this in index.ios.js / index.android.js
'use strict';; var RefreshableListView = ;var width height = Dimensions;var dataUrl = 'https://raw.githubusercontent.com/shigebeyond/react-native-sk-refreshable-listview/master/test.json';var data = id: 1 text: 'row 1' id: 2 text: 'row 2' id: 3 text: 'row 3' id: 4 text: 'row 4' id: 5 text: 'row 5' id: 6 text: 'row 6' id: 7 text: 'row 7' id: 8 text: 'row 8' id: 9 text: 'row 9' id: 10 text: 'row 10'; // simulate fetch(){ return { };} var test = React; var styles = emptyBox: flex: 1 justifyContent: 'center' alignItems: 'center' emptyTxt: fontSize: 23 fontWeight: 'bold' container: flex: 1 backgroundColor: '#FFF' row: padding: 10 height: height / 10 backgroundColor: 'yellow' borderBottomColor: 'grey' borderBottomWidth: 2 ; AppRegistry;
Properties
Any View property and the following:
Prop | Description | Default |
---|---|---|
onRefresh |
callback to refresh data (load first page of data), which should return a Promise, I use this promise to tell when to stop loading (render loading view). | None |
onLoadMore |
callback to load more data (load next page of data), which should return a Promise, I use this promise to tell when to stop loading (render loading view). | None |
Methods
Method | Description | Params |
---|---|---|
scrollToTop |
scroll to top. | None |
scrollToBottom |
scroll to bottom. | None |