react-native-refresher

    0.1.1 • Public • Published

    A pull to refresh ListView for React Native completely written in js. Also supports custom animations.

    Installation

    npm install react-native-refresher --save

    Usage

    var React = require('react-native');
    // Loading the refresher ListView and Indicator
    var {
      RefresherListView,
      LoadingBarIndicator
    } = require('react-native-refresher');
     
    var {
      AppRegistry,
      Text,
      View,
      ListView,
    } = React;
     
     
    class Content extends React.Component {
      constructor() {
        super();
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
          dataSource: this.ds.cloneWithRows(["Row 1", "Row 2"]),
        };
      }
      onRefresh() {
       // You can either return a promise or a callback
        this.setState({dataSource:this.fillRows(["Row 1", "Row 2", "Row 3", "Row 4"])});
      }
      render() {
        return (
          <View style={{flex:1}}>
            <RefresherListView
              dataSource={this.state.dataSource}
              onRefresh={this.onRefresh.bind(this)}
              indicator={<LoadingBarIndicator />}
              renderRow={(rowData) => <View style={{padding:10,borderBottomColor: '#CCCCCC', backgroundColor: 'white',borderBottomWidth: 1}}><Text>{rowData}</Text></View>}
            />
          </View>
        );
      }
    };
     

    Examples

    Refresher: iOS Activity Indicator Refresher: Bar Indicator

    Props

    • threshold: number The amount of pixeles to validate the refresh. By default the theshold will be calculated by the header height.
    • minTime: number The minimum amount of time for showing the loading indicator while is refreshing. Default 320ms.
    • onRefresh: func.isRequired Called when user pulls listview down to refresh.
    • indicator: oneOfType([element]) React Element. See example of a custom indicator
    • refreshOnRelease: bool If is necessary to release touch for refresh or refresh will be done automatically once threshold is passed.
    • listStyle: style The list style

    Credits

    Refresher is created by Syrus Akbary and inspired by Refresher and react-native-refreshable-listview. If you have suggestions or bug reports, feel free to send pull request or create new issue.

    Install

    npm i react-native-refresher

    DownloadsWeekly Downloads

    3

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • syrusakbary