react-native-refreshable-list

The best Refreshable List component for React Native.

Demo

You can pass the expo to quickly see the effect of this project, click the link below.

Install Demo

Install

``
yarn add react-native-refreshable-list


or with npm


npm install --save react-native-refreshable-list
`

Quick Start

`
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {RCTRefreshList, RCTFooterState} from 'react-native-refreshable-list';

export default class CommonRefreshListPage extends React.Component {

constructor(props){
super(props);
this.state = {
data: [],
count: 0
};
}

componentDidMount() {
var data = [];
for(var i =0; i < 20; i++){
data.push('item' + i);
}
this.setState({
data
});
}

render() {
return(
style={styles.container}
ref={(ref) => this.list = ref}
type={'flatList'}
pullBoundary={80}
headerBackgroundColor={'#f5f5f5'}
factor={10}
data={this.state.data}
renderItem={this._renderItem}
ItemSeparatorComponent={this._renderSeparatorComponent}
pullRefresh={() => this._pullRefresh()}
loadMore={() => this._loadMore()}
keyExtractor={(item, index) => index.toString()}/>
);
}

_renderItem(info) {
return (

);
}

_renderSeparatorComponent() {
return(

);
}

_pullRefresh() {
var data = [];
for(var i = 0; i < 20; i++) {
data.push('item' + i);
}
this._pullTimeout = setTimeout(() => {
console.log("setTimeout");
this.setState({
data,
count: 0
}, () => this.list.loadCompleted());
}, 1500);
}

_loadMore() {
if (this.state.count < 1) {
var data = [];
var size = this.state.data.length;
for(var i = size; i < size + 20; i++){
data.push('item' + i);
}
this._loadTimeout = setTimeout(() => {
this.setState({
data: this.state.data.concat(data),
count: this.state.count + 1
}, () => this.list.loadCompleted(RCTFooterState.CanLoaded));
}, 3000);
} else {
this.list.loadCompleted(RCTFooterState.NoMore);
}
}

componentWillUnmount() {
clearTimeout(this._pullTimeout);
clearTimeout(this._loadTimeout);
}
}

class ItemComponent extends React.PureComponent {
constructor(props){
super(props);
}
render() {
return(
{this.props.content}
);
}
}

const styles = StyleSheet.create({
container: {
backgroundColor: 'white'
},
text: {
fontSize: 18,
color: '#333',
textAlign: 'center',
paddingVertical: 25
},
line: {
width: '100%',
backgroundColor: '#eaeaea',
height: 1
}
});
`

Feature

Custom PropTypes

* type: List types, optional values for flatList with sectionList.
* pullBoundary: The minimum distance trigger refresh. The default value of 80.
* headerBackgroundColor: Set backgroundColor of headerView. The default value of white.
* factor: The drop-down resistance factors. The default value of 10, Value must be greater than 0.
* pullRefresh: List refreshing callback.
* loadMore: List loadMore callback.

Native PropTypes

Support most of the primary attributes, for example:

* data: List data of FlatList.
* sections: List data of SectionList.
* renderItem: In the list of child components.
, etc.

> Note: the native refresh method cannot be used. For example: onRefresh、refreshing, Because the library have their own a refresh mechanism.

Method Call

* loadCompleted: Refresh after the completion of the call. Optional parameter RCTFooterState.

RCTFooterState` is a state of tensile load more. So it has the following optional values:

* Hide
* Loading
* CanLoaded
* NoMore
* LoadFailure

The effect of them all for their literal meaning.

Custom Use

todo ...