RCTRefreshControl

A pull down to refresh control for react native. This project use a native-bridging way to implement the Pull-To-Refresh, absolutely NO jitter and lagging compared with those package which implemented using Javascript.

NOTES

Exactly the same as the original repo except with a PR that didn't make it onto npm and no submodules.

Screen Shot

This is a forked project from Shuangzuan/RCTRefreshControl. This project added a more user-friendly way to use this package, and I also fix some bugs of the original project.

Installation

1. Run npm install react-native-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-native-refresh-control'); to your code.

__I will yield the package name once Shuangzuanrequests __.

Usage

It is very easy to use, just use RCTRefreshControl.ListView as the React.ListView or use RCTRefreshControl.ScrollView as the React.ScrollView

The simple difference between the ListView and ScrollView in React Native is that you can pass your onRefresh event handler into RCTRefreshControl.ListView and RCTRefreshControl.ScrollView.

The event handler below stop the refreshing state of the ListView in 2 seconds once the user pull down the ListView and triggered the refresh.

var onRefreshHandler = (stopRefreshAnimation) => {
  setTimeout(stopRefreshAnimation, 2000);
};

And use like this

<RCTRefreshControl.ListView
  // another props here
  onRefresh={onRefreshHandler}
/>

Sample Code

Using fewer lines to implement a Pull-To-Refresh

'use strict';

import React from 'react-native';
const {
  View,
  ListView
} = React;

import RCTRefreshControl from 'react-refresh-control';

class MyApp extends React.Component {
  constructor(props) {
    super(props);

    var dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: dataSource.cloneWithRows(['#484848', '#2F9C0A', '#05A5D1'])
    };
  }
  onRefresh(stopRefresh) {
    console.log(this.state);
    setTimeout(stopRefresh, 2000);
  }
  renderRow(data) {
    return (
      <View style={{backgroundColor: data, height: 200}} />
    );
  }
  render() {
    return (
      <View style={{flex: 1, flexDirection: 'row', borderTopWidth: 20, borderTopColor: 'black'}}>
        <RCTRefreshControl.ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow.bind(this)}
          onRefresh={this.onRefresh.bind(this)}
          />
        <RCTRefreshControl.ScrollView
          onRefresh={this.onRefresh.bind(this)}>
          <View style={{backgroundColor: '#05A5D1', height: 200}} />
          <View style={{backgroundColor: '#FDF3E7', height: 200}} />
          <View style={{backgroundColor: '#484848', height: 200}} />
        </RCTRefreshControl.ScrollView>
      </View>
    );
  }
}

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

License

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