rnr
react-native-refresh-control
npm i react-native-refresh-control
rnr

react-native-refresh-control

A pull down to refresh control for react native.

by DickyT

2.1.0 (see all)License:MITTypeScript:Not Found
npm i react-native-refresh-control
Readme

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 jetter and lagging compared with those package which implemented using Javascript.

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.

react-refreshcontrol

Installation

  1. Run npm install DickyT/RCTRefreshControl --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.

I am not going to add a sperate package into npm unless I get the authorization of Shuangzuan

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.

Downloads/wk

9

GitHub Stars

22

LAST COMMIT

7yrs ago

MAINTAINERS

1

CONTRIBUTORS

7

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
2.1.0
latest
7yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate