Blog

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-content>

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

</ion-content>

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.

Usage

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

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

@NgModule({
  declarations: [
     ...
     IonRefreshNative,
     ...
  ],
  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';

Implementation

• 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-content>

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

</ion-content>

Demo

See the directive live in action in this demo.