NativeScript-PullToRefresh ♻️

NativeScript plugin to use Pull to Refresh on any view.

Android - SwipeRefreshLayout

iOS - UIRefreshControl

Sample Screen

Android	iOS

Installation

tns plugin add nativescript-pulltorefresh

Usage

Vanilla NativeScript

XML

    
        
            
                <label class="message">
            </label>
        
    

JS

function refreshList(args) {

    // Get reference to the PullToRefresh component;
    var pullRefresh = args.object;

    // Do work here... and when done call set refreshing property to false to stop the refreshing
    loadItems().then((resp) => {
        // ONLY USING A TIMEOUT TO SIMULATE/SHOW OFF THE REFRESHING
        setTimeout(() => {
            pullRefresh.refreshing = false;
        }, 1000);
    }, (err) => {
        pullRefresh.refreshing = false;
    });
}
exports.refreshList = refreshList;

Angular NativeScript

import { registerElement } from "nativescript-angular/element-registry";
registerElement("PullToRefresh", () => require("nativescript-pulltorefresh").PullToRefresh);

refreshList(args) {
         var pullRefresh = args.object;
         setTimeout(function () {
            pullRefresh.refreshing = false;
         }, 1000);
    }

HTML

    
        <template>
            <label></label>
        </template>
    

NativeScript Vue

import Vue from 'nativescript-vue';

Vue.registerElement(
  'PullToRefresh',
  () => require('nativescript-pulltorefresh').PullToRefresh
);

Component

<template>
  
    
      
        
          
          <label>
        </label>
      
    
  
</template>

Webpack

If you are using webpack with uglify for Android, you must add TNS_SwipeRefreshListener to the mangle exception list.

webpack.config.js

if (uglify) {
    config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));

    // Work around an Android issue by setting compress = false
    const compress = platform !== "android";
    config.plugins.push(new UglifyJsPlugin({
        uglifyOptions: {
            mangle: { reserved: [ ...nsWebpack.uglifyMangleExcludes, "TNS_SwipeRefreshListener" ] },
            compress,
        }
    }));
}

Properties

• refresh : function required
• refreshing: boolean - Notifies the widget that the refresh state has changed.

Changelog