syrusakbary / react-native-refresher Goto Github PK

A pull to refresh ListView for React Native completely written in js.

License: MIT License

JavaScript 100.00%

react-native-refresher's Introduction

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

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.

react-native-refresher's People

Contributors

Stargazers

Watchers

react-native-refresher's Issues

Some problems.

I used LoadingBarIndicator. It worked but not like yours.

Pass event prop down to onScroll()

Hello,

Playing with this component, but getting an error when I pass my onScroll function to it. The component doesn't seem to be passing the event prop into the function. Is there a reason you're doing this? If not, would you accept a PR to fix it?

Current
this.props.onScroll && this.props.onScroll();

Proposed
this.props.onScroll && this.props.onScroll(e);

Thanks!

[Error] undefined is not an object (evaluating 'Object') _processor precomputeStyle

I get this error immediately after I pass the pull threshold.
Using react-native-0.12.0, ios 8.4

This component is not usable under ES6.

As title.
Can you make a same one with ES6?

How to use it with ScrollView?

Hi,

Thanks for the component.
What is the best way to use it on a ScrollView and not ListView?

Ran.

Cannot read property 'top' of undefined

App will crash with this error if I scroll and stop with click/tap. With ListView or https://github.com/jsdf/react-native-refreshable-listview are working fine.

Getting a Syntax error in RefresherListView.js

Hi when iam trying to use this module iam getting a syntax error as shown below

Unexpected token(188:88)

Android Support

Are there any plans to add android support?

How to require react-native-refresher

Hi, after npm install react-native-refresher, I use require('react-native-refresher'). But bug happened.

As,

On the [email protected] default round indicator stucks on top of list

To reproduce: just upgrade to react-native 0.9.0-rc and try to refresh list.
After release list indicator is overlaying it.
Looks like breaking changes in react native can break refresher in near 0.9.0 realease

onRefresh not called & warnings in packager

Hi,

Thanks for sharing your work. It appears that the onRefresh function is not getting called at all on pull and release - I stuck in a console.log() somewhere in the function and even that is not getting hit at all. Please what could be missing? My list seems to work normal as before, no errors there.

Except for these warnings in the packager:

Unable to resolve module precomputeStyle from /Code/MyApp/node_modules/react-native-refresher/lib/RefresherListView.js Unable to resolve module logError from /Code/MyApp/node_modules/react-native-refresher/lib/RefresherListView.js Unable to resolve module NativeMethodsMixin from /Code/MyApp/node_modules/react-native-refresher/lib/indicators/LoadingBarIndicator.js