Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shigebeyond/react-native-sk-refreshable-listview
Component wrap ListView, supports: 1 pull up to refresh 2 pull down to load more 3 scroll to top 4 scroll to bottom
https://github.com/shigebeyond/react-native-sk-refreshable-listview
Last synced: about 4 hours ago
JSON representation
Component wrap ListView, supports: 1 pull up to refresh 2 pull down to load more 3 scroll to top 4 scroll to bottom
- Host: GitHub
- URL: https://github.com/shigebeyond/react-native-sk-refreshable-listview
- Owner: shigebeyond
- Created: 2016-03-09T07:40:40.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-03-11T08:47:04.000Z (over 8 years ago)
- Last Synced: 2024-10-13T06:58:55.807Z (about 1 month ago)
- Language: JavaScript
- Size: 139 KB
- Stars: 37
- Watchers: 5
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
1. `npm install react-native-sk-refreshable-listview@latest --save`
2. Write this in index.ios.js / index.android.js
```javascript
'use strict';
import React, {
AppRegistry,
StyleSheet,
Text,
View,
Dimensions,
} from 'react-native';
var RefreshableListView = require('react-native-sk-refreshable-listview');
var {width, height} = Dimensions.get('window');
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()
function skFetch(url){
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(data);
}, 1000)
});
}
var test = React.createClass({
getInitialState() {
return {
dataSource : new RefreshableListView.DataSource({rowHasChanged : (row1, row2) => row1 !== row2}),
}
},
componentDidMount() {
this.fetchData(true);
},
/**
* load data
* @param bool refresh: whether to refresh data, or load more data
* @return Promise
*/
fetchData(refresh){
if(refresh){
this.nextPage = 1;
}
// get the data url of next page
var nextDataUrl = dataUrl + '?page=' + this.nextPage;
// I use skFetch() to simulate fetch()
return skFetch(nextDataUrl)
.then((result) => {
var newRows;
if(refresh){ // set rows of dataSource
newRows = result;
}else{// add new rows into dataSource
newRows = this.getRows().concat(result);
}
var newDataSource = this.state.dataSource.cloneWithRows(newRows);
this.setState({
dataSource: newDataSource,
});
this.nextPage++;
}).catch((e)=>{
console.log(e);
});
//.done();
},
// get all rows of dataSource
getRows() {
var result = this.state.dataSource && this.state.dataSource._dataBlob && this.state.dataSource._dataBlob.s1;
return result ? result : [];
},
// whether no row in dataSource
isEmpty(){
return this.getRows().length == 0;
},
renderRow(row) {
return (
{row.text}
);
},
render() {
if(this.isEmpty()){
return (
{'Please pull down to fresh data, \n pull up to load more data'}
)
}
return (
this.fetchData(true)} // 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).
onLoadMore={() => this.fetchData(false)} // 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)
showLoadMore={true}
renderRow={this.renderRow}
/>
);
}
});
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.registerComponent('test', () => test);
```
##Properties
Any [View property](http://facebook.github.io/react-native/docs/view.html) 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*|