Implement Ionic Pull-to-Refresh like in Native Apps using Ion-Refresh-Native

Implement Ionic Pull-to-Refresh like in Native Apps using Ion-Refresh-Native

I was working on a project with Ionic v3 where I need to implement pull-to-refresh feature on certain pages. It’s like the ones we can see when refreshing the contents of some mobile apps like Gmail, Chrome browser and other native apps . 

While this can be achieved by using Ionic’s built-in Refresher component, it doesn’t really fit the requirement of what I want to achieve.  The ion-refresher component extends the functionality of the content component which can be implemented as follows.


  <ion-refresher (ionRefresh)="doRefresh($event)">


I’ve been searching the net all over but didn’t find any solution to fit my needs so I built a little directive which you can easily integrate into your project from NPM by simply running the following command.

npm i ion-refresh-native --save or npm install ion-refresh-native --save

The directive ion-refresh-native extends the functionality of the ion-refresher or the Pull-To-Refresh component of the Ionic Framework. This has been tested with Ionic v3.


First, Import the Directive to your app.module.ts

import { IonRefreshNative } from 'ion-refresh-native';

  declarations: [
  imports: [],
  bootstrap: [IonicApp],
  entryComponents: [],
  providers: []
export class AppModule {}

Then, in your app.scss file, add the following imports to apply styles.

@import '../../node_modules/ion-refresh-native/dist/scss/ion-refresh-native';


  • Now add the ion-refresh-native attribute in the ion-refresher component.
  • Also specified pullingIcon="ios-refresh-outline" and refreshingSpinner="crescent" so the icons will just blend.

  <ion-refresher ion-refresh-native (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="ios-refresh-outline" refreshingSpinner="crescent"></ion-refresher-content>



See the directive live in action in this demo.

Cromwell Bayon

He is a self-tutored programmer and a Full-Stack Developer. He strives to excel in the newest technology as possible. He has a very high sense of technicality and analytical skills which allows him to resolve any kind of issues related to technology. He also loves woodworking. Read more about him here...

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.