This package has been deprecated

    Author message:

    This plugin has been deprecated in favor of the nStudio, LLC. version. Please see https://github.com/nstudio/nativescript-pulltorefresh for the updated plugin. You can install this plugin by executing 'tns plugin add @nstudio/nativescript-pulltorefresh' in your project. Thanks.

    nativescript-pulltorefresh
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    npm npm Build Status GitHub stars 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_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

    Install

    npm i nativescript-pulltorefresh

    DownloadsWeekly Downloads

    22

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    21.6 kB

    Total Files

    7

    Last publish

    Collaborators

    • bradmartin
    • nathanaela
    • pstaev