https://github.com/react-native-china/react-native-drop-refresh

♻️ A pull down to refresh control for react native.
https://github.com/react-native-china/react-native-drop-refresh

react-native refresh

Last synced: about 2 months ago
JSON representation

♻️ A pull down to refresh control for react native.

• Host: GitHub
• URL: https://github.com/react-native-china/react-native-drop-refresh
• Owner: react-native-china
• Fork: true (Shuangzuan/RCTRefreshControl)
• Created: 2016-03-31T10:19:45.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2018-12-25T01:51:48.000Z (about 6 years ago)
• Last Synced: 2024-10-29T13:49:59.135Z (3 months ago)
• Topics: react-native, refresh
• Language: Objective-C
• Homepage:
• Size: 188 KB
• Stars: 68
• Watchers: 3
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native - react-native-drop-refresh ★49 - A pull down to refresh control for react native. (Components / UI)

README

        
# react-native-drop-refresh

A pull down to refresh control for react native.

This is a fork version from [Shuangzuan/RCTRefreshControl](https://github.com/Shuangzuan/RCTRefreshControl).

Better npm maintainess,issues are welcomed.

[![NPM](https://nodei.co/npm/react-native-drop-refresh.png)](https://nodei.co/npm/react-native-drop-refresh/)

[![NPM](https://nodei.co/npm-dl/react-native-drop-refresh.png?months=9)](https://nodei.co/npm/react-native-drop-refresh/)

####Update 2.2.0 

Support react-native 0.40.0, change CMD to ES6 syntax.

####Update 2.1.0 

Support react-native 0.20.0, solve module name collsion issue.

## Screen Shot

![Screen Shot](screen-shot.gif)

## Installation

1. Run `npm install react-native-drop-refresh --save` in your project directory.

2. Run `react-native link` to link the lib up.

3. Add `import DropRefreshControl from 'react-native-drop-refresh';` to your code.

## Usage

```javascript

import React, { Component } from 'react';

import DropRefreshControl from 'react-native-drop-refresh';

import {

  AppRegistry,

  ListView,

  ScrollView,

  StyleSheet,

  Text,

  View

} from 'react-native';

var SCROLLVIEW = 'ScrollView';

var LISTVIEW = 'ListView';

class RCTRefreshControlDemo extends Component{

  constructor(){

    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

    this.state = {

      dataSource: ds.cloneWithRows(['#484848', '#2F9C0A', '#05A5D1']),

    }

  }

  componentDidMount() {

    // ScrollView

    DropRefreshControl.configure({

      node: this.refs[SCROLLVIEW],

      tintColor: '#05A5D1',

      activityIndicatorViewColor: '#05A5D1'

    }, () => {

      setTimeout(() => {

        DropRefreshControl.endRefreshing(this.refs[SCROLLVIEW]);

      }, 2000);

    });

    // ListView

    DropRefreshControl.configure({

      node: this.refs[LISTVIEW]

    }, () => {

      setTimeout(() => {

        DropRefreshControl.endRefreshing(this.refs[LISTVIEW]);

      }, 2000);

    });

  }

  render() {

    return (

      

        

          

          

          

        

         {

            var color = rowData;

            return (

              

            );

          }}

        />

      

    );

  }

};

var styles = StyleSheet.create({

  container: {

    flex: 1,

    flexDirection: 'row'

  }

});

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

// use `export default DropRefreshControlDemo` instead to use this as an component;

```

---

## License

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