Awesome Open Source
Awesome Open Source

Custom Android Pull to Refresh

Inspired by the shots from the author:

Expo Demo

Coffee Concept Coin Concept Weather Concept
Output sample Output sample Output sample


Currently, react-native provides RefreshControl out of the box. (Which uses standard circle android animation).

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.


  1. Install the package using either:
$ npm install --save react-native-pull-refresh
# or
$ yarn add react-native-pull-refresh
  1. Install and link the Lottie package (renders Adobe After Effect animations):
yarn add lottie-react-native
# or
npm i --save lottie-react-native

react-native link lottie-react-native


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(() => {
      this.setState({isRefreshing: false});
    }, 5000);

  render() {
    return (
      <View style={{flex:1}}>
        <View style={{flex: 7, backgroundColor: '#F8F4FC'}}>
            isRefreshing= {this.state.isRefreshing}
            onRefresh= {this.onRefresh.bind(this)}
            animationBackgroundColor = {'#564A63'}
            pullHeight = {180}
            contentView = {
            onPullAnimationSrc ={require('./umbrella_pull.json')}
            onStartRefreshAnimationSrc ={require('./umbrella_start.json')}
            onRefreshAnimationSrc = {require('./umbrella_repeat.json')}
            onEndRefreshAnimationSrc = {require('./umbrella_end.json')}

Animation Files Format

Lottie JSON -

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

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


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! :)

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (69,927
android (6,290
react (5,385
react-native (1,521
expo (118
pull-to-refresh (45
lottie (36