Need help with react-native-refresher?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

syrusakbary
453 Stars 36 Forks MIT License 11 Commits 12 Opened issues

Description

A pull to refresh ListView for React Native completely written in js.

Services available

!
?

Need anything else?

Contributors list

# 5,660
GraphQL
graphen...
graphql...
webasse...
4 commits
# 103,386
React
HTML
CSS
css-mod...
1 commit
# 35,786
Objecti...
medium
gatsby
netlify
1 commit

A pull to refresh ListView for React Native completely written in js. Also supports custom animations.

Installation

npm install react-native-refresher --save

Usage

var React = require('react-native');
// Loading the refresher ListView and Indicator
var {
  RefresherListView,
  LoadingBarIndicator
} = require('react-native-refresher');

var { AppRegistry, Text, View, ListView, } = React;

class Content extends React.Component { constructor() { super(); this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: this.ds.cloneWithRows(["Row 1", "Row 2"]), }; } onRefresh() { // You can either return a promise or a callback this.setState({dataSource:this.fillRows(["Row 1", "Row 2", "Row 3", "Row 4"])}); } render() { return ( } renderRow={(rowData) => {rowData}} /> ); } };

Examples

Refresher: iOS Activity Indicator Refresher: Bar Indicator

Props

  • threshold: number
    The amount of pixeles to validate the refresh. By default the theshold will be calculated by the header height.
  • minTime: number
    The minimum amount of time for showing the loading indicator while is refreshing. Default 320ms.
  • onRefresh: func.isRequired
    Called when user pulls listview down to refresh.
  • indicator: oneOfType([element])
    React Element. See example of a custom indicator
  • refreshOnRelease: bool
    If is necessary to release touch for refresh or refresh will be done automatically once threshold is passed.
  • listStyle: style
    The list style

Credits

Refresher is created by Syrus Akbary and inspired by Refresher and react-native-refreshable-listview. If you have suggestions or bug reports, feel free to send pull request or create new issue.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.