nadikuts/react-native-pull-refresh

Custom pull to refresh component for Android

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:

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

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

... or go here and try it out!

Contribution / Issues

Are very welcome! :)

react-native-pull-refresh's Issues

Does it work with a WebView (fullscreen) and do you plan to have iOS supported?

Hi @NadiKuts,

your solution looks really promising. I have not played around with it pretty much yet, but I have two questions already:

• does it work with a Webview, where the Webview takes 100% of the Screen Size. Which means the user should still be able to scroll to the top of the WebView.
• and do you plan do support iOS in the future?

Regarding the Webview, it would be possible to get the scroll position (eg. user is at the top of the page or not) from the Webview (with onMessage etc.). Still I would need a way to tell your component to only trigger the PTR when a certain condition is met (eg. scroll top is 0).

Can you help me out here please? Thanks.

Will this ever support horizontal pull-to-refresh?

Wondering if this will ever consider implementing a horizontal pull to refresh. I cannot seem to find anything that does it.

NPM package is not updated.

yarn add installs an older version of the code which does not work.

Does this work with FlatList?

I know FlatList has built in pull-to-refresh functionality, but I have yet to find a way to override it with something other than the default. Since FlatList is based on ScrollView should it work?

Can't make list take full screen even with flex: 1

If I dont have enough list items, the animationBackgroundColor is shown in the background.

Does support load more

Does support load more？

Android only?

This change appears to make the library work for iOS. Perhaps the "Android" only indicator in the readme should be removed?

#43

undefined is not an object (evaluating '_react.default.PropTypes.bool')

Hello, help me please!!

undefined is not an object (evaluating '_react.default.PropTypes.bool')

DefinitlyTyped version

Hi,

Is it possible for you to add a DefinitlyTyped version so that I can use the library in my typescript applications?

https://github.com/DefinitelyTyped/DefinitelyTyped

Animation bugs on scroll down

If you have an empty or small list, and scroll down, the animation disappears and onRefresh method is not called anymore.

Undefined bool in animatedPullToRefresh.js

proptypes no longer avalible in react

Needs Updates...!

Not working anymore, need to update in the package manager, there are some error because you used old versions,however it was easy to solve them manually!...

Just import the proptypes according the new version....
and replace react.proptypes into PropTypes 👍

Scroll is disabled when scrollY reaches to 0

It's missing a check to fix the scrollable view to get disabled when the scrollY value is 0 after the second swipe down without refreshing the list, I will provide below the fixes to someone who wants to open a PR to fix it in master:

// line 146
            if (
                this.state.scrollY._value > 0 ||
                (this.state.scrollY._value === 0 && gestureState.dy < 0)
            ) {
                this.setState({isScrollFree: true});
            }

Taps on List Items when scroll is at the very top do not trigger onPress events in the children

But as soon as I scroll even a little bit down, taps will trigger onPress in the children?

Any idea what could cause those events in children not to fire?