This package has been deprecated

    Author message:

    This plugin has been deprecated as of version 3.0.1 and will be archived. The ownership has been migrated to nativescript-community so that it can continue on. To update your plugin the new repo can be found here: https://github.com/nativescript-community/ui-pulltorefresh.

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

    3.0.2 • Public • Published

    NativeScript-PullToRefresh

    NativeScript plugin to use Pull to Refresh on any view.


    UPDATE

    This plugin has been migrated to nativescript-community as of June 24, 2021. The repo can be found here: https://github.com/nativescript-community/ui-pulltorefresh

    Installation

    NativeScript 7+:

    ns plugin add @nstudio/nativescript-pulltorefresh

    NativeScript prior to 7:

    tns plugin add @nstudio/nativescript-pulltorefresh@2.0.0

    Android - SwipeRefreshLayout

    iOS - UIRefreshControl

    Sample Screen

    Android iOS
    Android Sample iOS Sample

    Usage

    NativeScript Core

    XML

    <page xmlns="http://schemas.nativescript.org/tns.xsd"
          xmlns:PullRefresh="@nstudio/nativescript-pulltorefresh"
          loaded="pageLoaded">
        <PullRefresh:PullToRefresh refresh="refreshList" indicatorFillColor="#fff000" indicatorColor="#3489db">
            <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("@nstudio/nativescript-pulltorefresh").PullToRefresh);
    
    refreshList(args) {
             const pullRefresh = args.object;
             setTimeout(function () {
                pullRefresh.refreshing = false;
             }, 1000);
        }

    HTML

    <PullToRefresh
      (refresh)="refreshList($event)"
      indicatorFillColor="#fff000"
      indicatorColor="#3489db"
    >
      <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('@nstudio/nativescript-pulltorefresh').PullToRefresh
    );

    Component

    <template>
      <Page>
        <PullToRefresh
          @refresh="refreshList"
          indicatorFillColor="#fff000"
          indicatorColor="#3489db"
        >
          <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>

    Properties

    • refresh : function required
    • refreshing: boolean - Notifies the widget that the refresh state has changed.
    • indicatorFillColor: Color - the color of the indicator background fill.
    • indicatorColor: Color - the color of the indicator itself.

    Changelog

    Contributing

    Install

    npm i @nstudio/nativescript-pulltorefresh

    DownloadsWeekly Downloads

    614

    Version

    3.0.2

    License

    MIT

    Unpacked Size

    20.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar