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

About the developer

NadiKuts
498 Stars 116 Forks 112 Commits 20 Opened issues

Description

Custom pull to refresh component for Android

Services available

!
?

Need anything else?

Contributors list

# 113,558
React
lottie-...
Android
React N...
50 commits
# 217,026
GraphQL
Scala
lottie-...
preload...
3 commits
# 425,769
React
JavaScr...
lottie-...
lottie
1 commit
# 422,192
React
JavaScr...
lottie-...
lottie
1 commit
# 131,706
CSS
PHP
MongoDB
React
1 commit
# 375,011
React
JavaScr...
lottie-...
lottie
1 commit

Custom Android Pull to Refresh

Inspired by the shots from the author: https://dribbble.com/yupnguyen

Expo Demo

| Coffee Concept | Coin Concept | Weather Concept | ------------------------- |:-----------------------:|:-----------------------:| | Output sample|Output sample |Output sample|

Description

Currently, react-native provides RefreshControl out of the box. (Which uses standard circle android animation). https://facebook.github.io/react-native/docs/refreshcontrol.html.

However, it is not 'yet' possible to override the animation that runs during refreshing phase. This package aims to fill this gap and provide a 'relatively' easy way to add your own custom animation.

Installation

  1. Install the package using either: ```sh $ npm install --save react-native-pull-refresh

    or

    $ yarn add react-native-pull-refresh ```

  2. Install and link the Lottie package (renders Adobe After Effect animations): https://github.com/airbnb/lottie-react-native

yarn add lottie-react-native
# or
npm i --save lottie-react-native

react-native link lottie-react-native

Usage

This code is taken from

examples/SimpleAnimations/weatherAnimation
sample

You can find

< Header />
and
< ScrollItem />
components in the sample folder
import PullToRefresh from 'react-native-pull-refresh';

export default class weatherAnimation extends Component { constructor( ) { super( ); this.state = { isRefreshing: false, }; }

onRefresh() { this.setState({isRefreshing: true});

// Simulate fetching data from the server
setTimeout(() =&gt; {
  this.setState({isRefreshing: false});
}, 5000);

}

render() { return (

        }

        onPullAnimationSrc ={require('./umbrella_pull.json')}
        onStartRefreshAnimationSrc ={require('./umbrella_start.json')}
        onRefreshAnimationSrc = {require('./umbrella_repeat.json')}
        onEndRefreshAnimationSrc = {require('./umbrella_end.json')}
      /&gt;
    </pulltorefresh></view>
  </view>
);

} }

Animation Files Format

Lottie JSON - https://github.com/airbnb/lottie-react-native

Lottie is a mobile library, developed by AirBnB for Android and iOS that parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively on mobile.

Lottie allows to easily use animations in react-native apps. You just need to create an animation in Adobe After Effects and export it with bodymovin addon to AE https://github.com/bodymovin/bodymovin.

You can find file examples in

examples/SimpleAnimations/animations
folder

General Props

| Prop | Type | Description | |---|---|---| |

isRefreshing
|

Boolean
|Refresh state set by parent to trigger refresh.| |
pullHeight
|
Integer
|Pull Distance Default 180.| |
onRefresh
|
Function
|Callback after refresh event| |
contentView
|
Object
|The content: ScrollView or ListView| |
animationBackgroundColor
|
string
|Background color| |
onScroll
|
Function
|Custom onScroll event|

Animation Source Files Props

| Prop | Description | |---|---| |

onPullAnimationSrc
|Animation JSON that runs when scroll view is pulled down| |
onStartRefreshAnimationSrc
|Animation JSON that runs after view was pulled and released| |
onRefreshAnimationSrc
|Animation JSON that runs continuously until isRefreshing props is not changed| |
onEndRefreshAnimationSrc
|Animation JSON that runs after isRefreshing props is changed|

Demo

The demo app can be found at

examples/SimpleAnimations
.

Install Expo App on your Android smartphone

Scan this QR-code with your Expo App.

alt text

... or go here and try it out!

Contribution / Issues

Are very welcome! :)

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.