Pull to refresh for Android and Phonegap

Question

We are building multi-platform mobile app using Cordova, html, css. For some of our screen, we need pull to refresh functionality. I tried Damien's solution (http://damien.antipa.at/2012/10/16/ios-pull-to-refresh-in-mobile-safari-with-native-scrolling/) and iScroll for iOS and it works great for iOS platforms. But none of the methods works for android platform. Can someone please help me with this? How can i build pull To Refresh for Android platform.

Ftlb

We are having this exact same problem. For the time being we just had to settle for a Refresh button, but it would be awesome if we could change this. – Chirrupy

What have you tried? You say you've tried iScroll but "none of the methods works for android" Why not? Was it full of errors that you can debug and fix and send back to the iScroll folks? Stack Overflow is more for a "this is my problem, this is my debugging steps, please help" not "How can I build x?" – Inauspicious

Okay So, I finally had iScroll working for iOS and Android platforms. Just wanted to let you know that iScroll has solution for both iOS and Android Platforms. I followed following example from cubiq.org: :cubiq.org/dropbox/iscroll4/examples/pull-to-refresh – Ftlb

@Ftlb your link is not working, can you please share, how did you make it work? – Walford

Answer 1

You should be able to do that with iscroll.js : http://iscrolljs.com/

Or you can read Christophe Coenraets's blog article.

Rare

Thanks. I am using iScroll's pull to refresh example to build refresh functionality for iOS and Android and it is finally working on all phones. I had some implementation issues yesterday but I had it working today. – Ftlb

how did you do this @user3233772? – Walford

Answer 2

I enjoy the simplicity of this if you're also using React.js

https://www.npmjs.com/package/react-pull-to-refresh

An example :

<ReactPullToRefresh
  onRefresh={this.handleRefresh}
  className="your-own-class-if-you-want"
  style={{
    textAlign: 'center'
  }}>
  <h3>Pull down to refresh</h3>
  <div>{items}</div>
  <div>etc.</div>
</ReactPullToRefresh>

Talc