shuangzuan / rctrefreshcontrol

A pull down to refresh control for react native.

RCTRefreshControl

A pull down to refresh control for react native.

Screen Shot

Installation

1. Run npm install react-refresh-control --save in your project directory.
2. Drag RCTRefreshControl.xcodeproj to your project on Xcode.
3. Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTRefreshControl.a from the Products folder inside the RCTRefreshControl.xcodeproj.
4. Add var RCTRefreshControl = require('react-refresh-control'); to your code.

Usage

'use strict';

var React = require('react-native');
var TimerMixin = require('react-timer-mixin');
var RCTRefreshControl = require('react-refresh-control');
var {
  AppRegistry,
  ListView,
  ScrollView,
  StyleSheet,
  Text,
  View
} = React;

var SCROLLVIEW = 'ScrollView';
var LISTVIEW = 'ListView';

var RCTRefreshControlDemo = React.createClass({
  mixins: [TimerMixin],
  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(['#484848', '#2F9C0A', '#05A5D1']),
    };
  },
  componentDidMount: function() {
    // ScrollView
    RCTRefreshControl.configure({
      node: this.refs[SCROLLVIEW],
      tintColor: '#05A5D1',
      activityIndicatorViewColor: '#05A5D1'
    }, () => {
      this.setTimeout(() => {
        RCTRefreshControl.endRefreshing(this.refs[SCROLLVIEW]);
      }, 2000);
    });

    // ListView
    RCTRefreshControl.configure({
      node: this.refs[LISTVIEW]
    }, () => {
      this.setTimeout(() => {
        RCTRefreshControl.endRefreshing(this.refs[LISTVIEW]);
      }, 2000);
    });
  },
  render: function() {
    return (
      <View style={styles.container}>
        <ScrollView ref={SCROLLVIEW} style={styles.scrollView}>
          <View style={{backgroundColor: '#05A5D1', height: 200}} />
          <View style={{backgroundColor: '#FDF3E7', height: 200}} />
          <View style={{backgroundColor: '#484848', height: 200}} />
        </ScrollView>

        <ListView
          ref={LISTVIEW}
          style={styles.listView}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => {
            var color = rowData;
            return (
              <View style={{backgroundColor: color, height: 200}} />
            );
          }}
        />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row'
  }
});

AppRegistry.registerComponent('RCTRefreshControlDemo', () => RCTRefreshControlDemo);

---

License

Available under the MIT license. See the LICENSE file for more informatiion.

rctrefreshcontrol's Issues

ListView pagingEnable={true}, indicator won't stick on top

In your example

change the listView with pagingEnabled, and make the content longer than one page (2000), e.g.

< ListView
ref={LISTVIEW}
pagingEnabled={true}
style={styles.listView}
dataSource={this.state.dataSource}
renderRow={(rowData) => {
var color = rowData;
return (
< View style={{backgroundColor: color, height: 2000}} />
);
}}
/>

the loading indicator too shy to stay

Does there have a more beautiful way to configure node on the List?

Question

The demo use componentDidMount to configure the node like below:

componentDidMount: function() {
    // ScrollView
    RCTRefreshControl.configure({
      node: this.refs[SCROLLVIEW],
      tintColor: '#05A5D1',
      activityIndicatorViewColor: '#05A5D1'
    }, () => {
      this.setTimeout(() => {
        RCTRefreshControl.endRefreshing(this.refs[SCROLLVIEW]);
      }, 2000);
    });

    // ListView
    RCTRefreshControl.configure({
      node: this.refs[LISTVIEW]
    }, () => {
      this.setTimeout(() => {
        RCTRefreshControl.endRefreshing(this.refs[LISTVIEW]);
      }, 2000);
    });
  },

but in Performance, it recommend to use a LoadingPage before navigator transitions.so my render function code is like below:

  render: function(){
    if(this.state.isLoading){
      return <LoadingPage />
    }
    return(
        <ListView
          ref="ListView"
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}/>
    )
  },

so when the componentDidMount be triggered, there is no ListView but a LoadingPage.

Solution(not beautiful)

the Pseudo code is below

var ExamplePage = React.createClass({
  mixins: [utilsMixin, TimerMixin],
  getInitialState: function(){
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows([]),
      isLoading: true,
      isRefreshControlLoaded: false
    }
  },
  _fetch: function(){
    fetch(url)
    .then((res) => {
      return res.json();
    })
    .then((resJson) => {
      if(this.state.isRefreshControlLoaded === true){
        RCTRefreshControl.endRefreshing(this.refs["ListView"]);
      }
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(resJson),
        isLoading: false,
      });
    })
    .catch(e => {
      console.log(e);
    })
    .done();
  },
  componentDidMount: function(){
    InteractionManager.runAfterInteractions(() => {
      this._fetch();
    });
  },
  componentDidUpdate: function(prevProps, prevState){
    if((this.state.isRefreshControlLoaded === false) && (this.state.isLoading === false)){
      // ListView 
      this.setState({isRefreshControlLoaded: true});
      RCTRefreshControl.configure({
        node: this.refs["ListView"],
      }, () => {
        this._fetchData()
      });
    }

  },
  _renderRow: function(rowData){
    return (<Text>rowData</Text>);
  },

  render: function(){
    if(this.state.isLoading){
      return <LoadingPage/>
    }
    return(
        <ListView
          ref="ListView"
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}/>
        );
  },
});

Does there have a more beautiful way to solve this problem?

Hard blink after releasing

Hi Shuangzuan, thanks for open-sourcing this code. I was very excited to try it but found a "smooth" issue similar to jsdf/react-native-refreshable-listview#8.

As you can see, after releasing, the renderHeader quickly push down. This is particularly apparent when there is background color for rows. I guess it's because the marginTop value is suddenly changed after releasing.

Here is the code I slightly changed based on the ListView example (the only change is adding color in the renderRow anonymous function):

'use strict';

var React = require('react-native');
var TimerMixin = require('react-timer-mixin');
var RefreshControl = require('react-refresh-control');
var {
  AppRegistry,
  ListView,
  StyleSheet,
  Text,
  View,
} = React;

var AwesomeProject = React.createClass({
  mixins: [TimerMixin, RefreshControl.Mixin],
  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(['row 1', 'row 2']),
    };
  },
  componentDidMount: function() {
    this.configureRefreshControl({
      beginRefreshing: () => {
        this.setTimeout(() => {
          this.endRefreshing();
        }, 3000);
      }
    });
  },
  render: function() {
    return (
      <ListView
        style={{marginTop: 20}}
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text style={{backgroundColor: 'blue', color: 'white'}}>{rowData}</Text>}
        renderHeader={this.refreshControl}
        {...this.refreshControlProps()}
      />
    );
  }
});

AppRegistry.registerComponent('rn', () => AwesomeProject);

Limit/Threshold of pulling down to refresh

"RCTRefreshControl" naming conflict with RN0.18

Since FB open sourced their own RCTRefreshControl interface, there was a naming conflict. I've fixed it here by renaming this component to RNRefreshControl.

https://github.com/rreusser/RCTRefreshControl/tree/rename

To use, add to package.json:

"react-native-refresh-control": "[email protected]:rreusser/RCTRefreshControl.git#rename",

and follow the instructions where RCTRefreshControl has been renamed to RNRefreshControl.

I might stop just short of a pull request and coming up with a truly canonical version since we're trying hard to stay on top of the latest RN releases precisely so that we don't have to struggle with backward-compatibility of all of the modules we're using.

This was the first place I checked for fixes though, so feel free to use if it's useful!

not update?

not update?

undefined is not an object

undefined is not an object(evaluating 'RTCRefreshControl.configure')

Release a new version to NPM

You have a critical bug fix in master (#14) but you need to push a new build to NPM in order for us to take advantage of those.

endRefreshing function is not defined

I tried only using ScrollView btw, but other than used the code in the README. I believe there is an issue with the setTimeout

Can a refresh be triggered with code?

I'd like my list view to refresh on initial render to update stale cache. Is that possible?

not found libRCTRefreshControl.a in project

ListView has been removed from React Native

ListView has been removed from React Native. See https://fb.me/nolistview for more information or use deprecated-react-native-listview.

React Native 0.10-rc NSNumber

React Native 0.10-rc have breaking changes:
NSNumber parameters must be marked nonnull: Native bridge methods that take NSNumber values must annotate them using the Objective-C nonnull keyword

Pulldown is showing under NavigatorIOS bar

In case when is ListView placed inside NavigatorIOS "pull down" is showed under NavigatorIOS bar and under pull down "icon" is too big space. Is possible somehow fix this case? Thank you.

react-native dependecy conflicts with upper level react-native

Hi,

I upgraded my main react-native to 0.5.0 and my app started throwing errors. Found out that react-native which is inside the RCTRefreshControl/node_modules is older so XCode throws errors. Removed that folder and compiled and it was fine.

I wasted 3 hours debugging :-)

为什么不更新了呢？

这个组件的使用方法很好，只需要加个js方法即可使用，对RN的代码没有任何侵入，超喜欢啊。
为什么不更新了呢？
还希望出android版呢？

Support for UITableView

Using for example: https://github.com/aksonov/react-native-tableview

onEndReached not called?

After a pull to refresh, the onEndReached function from ListView is not getting called.

Build error - Semantic Issue

After following the instructions i get a build error.

The react-refresh-control folder is outside the react-native folder, is this correct or did I install it wrong.
Any input is appreciated!

I hope you can help, I would love to use your library.

JSON value '#05A5D1' of type NSString cannot be converted to NSNumber

I could make the control working on react-native 0.12 (*), but now when I pass a tintColor to configure() i get this error. I'm using the grey version for now 😊

(*) to fix #14 I had to change RCTRefreshControl.m by myself

Cannot find view with tag #187

After upgrade on react native 0.7.1 I am getting very often (not always) this error:

[error][tid:main][RCTRefreshControl.m:31] Cannot find view with tag #187
[error][tid:main][RCTRefreshControl.m:77] Cannot find view with tag #187

ListView support

The most common use for pull to refresh is to combine it with a TableView/ListView, but there doesn't seem to be a good way to do it with this component.

In RN a ListView actually is a ScrollView but with some added functionality so it shouldn't be too hard. Currently I wrap it with a View and put the refreshControl outside of the ListView. It works, but doesn't show the "Pull down", "Release" etc hints.

React-Native 0.16.0: 'RCTSparseArray.h' file not found

According to some highlights of the release here:
http://www.reactnative.com/react-native-v0-16-0-rc-and-v0-15-0-released/

RCTSparseArray was replaced by NSDictionary.

Will you upgrade?

Android version ?

Hi @Shuangzuan, have you given any thought to implementing the Android version of this control ?

React Native 0.8.0-rc Error

Great Plugin. Just a heads up:
In React Native 0.8.0-rc an error occurs as soon as the package is installed to node_modules regardless if it has been implemented or added to the xcode project.

Errors thrown up are deceiving as they point to every other module as the cause of the error but removing all and adding back one at a time shows this as the faulting module.