react-native-listview-refresher's Introduction

react-native-listView-refresher

A pull down to refresh and pull up to load more list view.

Important: Thanks Farid Safi 's Library react-native-gifted-listview. Because it changed to RefreshControl when update to version 0.0.3, so I changed the source code for appply my use condition.

Be Careful, this library is Only for iOS platform

ScreenShot:

At First

This library is simple to use, but without more custom config refresh header and load more footer, this will be changed after update.
The header or footer is part of list view Header or footer,you can alse add custom header or footer view to the list view.
The library is cached list view datasource, we don't need care about the page number and merge every page datasource.
We can use onFetching function to fetch data and notify the library finish load then pass to the request page data.

Usage

You can using npm to install component:

npm i react-native-listview-refresher

Simple usage:

import List from 'react-native-listview-refresher';

class demoClass extends Component {
  render() {
    return (
      <View style={styles.container}>
        <List
          ref='listView'
          renderRow={this.renderRow}
          onFetching={this.fetch}
          pullDownRefreshable={true}
          pullUpRefreshable={true}
        />
      </View>
    );
  }
  
  fetch = (page = 1, callback, options)=> {
    setTimeout(() => {
        callback(['1','2','3','4','5','6'],{allLoaded: false});
      }, 1000);
  }

  renderRow = (data,sectionID,rowID) => {
    return <Cell key={rowID} rowID={rowID}/>
  }
}

class Cell extends Component {
  render() {
    return(
      <View style={{height: 100, width: 300}}>
        <Text>index {this.props.rowID}</Text>
      </View>
    )
  }
}

Props

You can use this like list view component, any props will be pass to inner list view.

name	description	default
pullDownRefreshable	can be pull down to refresh	false
pullUpRefreshable	can be pull up to load more	false
renderRow	same as list view property	null
onFetching	loading data, prototype: `(page:number, callback:(data , {allLoaded: false})=>void, options:object) =>void` allLoaded means whether have more data in the list	null
*	other list view property	null