Custom Android Pull to Refresh

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

Expo Demo

| Coffee Concept | Coin Concept | Weather Concept | ------------------------- |:-----------------------:|:-----------------------:| | | ||

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

You can find

< Header />

< ScrollItem />

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(() => {
  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')}
      />
    </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

General Props

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

isRefreshing

Boolean

pullHeight

Integer

onRefresh

Function

contentView

Object

animationBackgroundColor

string

onScroll

Function

Animation Source Files Props

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

onPullAnimationSrc

onStartRefreshAnimationSrc

onRefreshAnimationSrc

onEndRefreshAnimationSrc

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.

... or go here and try it out!

Contribution / Issues

Are very welcome! :)