npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-refresh-control

v2.1.0

Published

A pull down to refresh control for react native.

Downloads

309

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.