react-native-listview-refresher

1.0.3 • Public • Published

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:

pull down image

pull up image

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

Changelog

  • v1.0.0
    • initialize project

Package Sidebar

Install

npm i react-native-listview-refresher

Weekly Downloads

5

Version

1.0.3

License

ISC

Last publish

Collaborators

  • myseven