npm

npm’s 2019 JavaScript ecosystem survey analysis is now available! Get your copy here »

nativescript-akylas-pulltorefresh

2.1.2 • Public • Published

npm npm GitHub stars GitHub forks PayPal Donate

NativeScript-PullToRefresh ♻️

NativeScript plugin to use Pull to Refresh on any view.

Android - SwipeRefreshLayout

iOS - UIRefreshControl

Sample Screen

Android iOS
Android Sample iOS Sample

Installation

tns plugin add nativescript-pulltorefresh

Usage

Vanilla NativeScript

XML

<page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:PullRefresh="nativescript-pulltorefresh"
      loaded="pageLoaded">
    <PullRefresh:PullToRefresh refresh="refreshList">
        <list-view items="{{ users }}">
            <list-view.itemTemplate>
                <label text="{{ name }}" row="0" col="1"textWrap="true" class="message" />
            </list-view.itemTemplate>
        </list-view>
    </PullRefresh:PullToRefresh>
</page>

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

<PullToRefresh (refresh)="refreshList($event)">
    <ListView [items]="itemList" >
        <template let-item="item">
            <Label [text]="item.id"></Label>
        </template>
    </ListView>
</PullToRefresh>

NativeScript Vue

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

Component

<template>
    <Page>
        <PullToRefresh @refresh="refreshList">
          <ListView for="item in listOfItems" @itemTap="onItemTap">
            <v-template>
              <!-- Shows the list item label in the default color and style. -->
              <Label :text="item.text" />
            </v-template>
          </ListView>
        </PullToRefresh>
    </Page>
</template>
 
<script>
export default {
    methods: {
        refreshList(args) {
            var pullRefresh = args.object;
            setTimeout(function () {
                pullRefresh.refreshing = false;
            }, 1000);
        }
    }
}
</script>

Webpack

If you are using webpack with uglify for Android, you must add TNS_wipeRefreshListener 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.

install

npm i nativescript-akylas-pulltorefresh

Downloadsweekly downloads

3

version

2.1.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability