Skip to content
♻️ NativeScript plugin for PullToRefresh controls
TypeScript Shell
Branch: master
Clone or download
Latest commit eab6862 Jul 17, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo androidX Jul 17, 2019
publish fix travis stages Mar 6, 2019
screens update screens Jul 17, 2019
src changelog update Jul 17, 2019
.gitignore improve ignore Mar 5, 2019
.prettierrc prettierconfig Nov 15, 2018
.travis.yml fix travis stages Mar 6, 2019
CHANGELOG.md changelog update Jul 17, 2019
CONTRIBUTING.md androidX Jul 17, 2019
LICENSE.md androidX Jul 17, 2019
README.md update docs Jul 17, 2019
tslint.json remove unused var lint rule Mar 6, 2019

README.md

NativeScript-PullToRefresh

NativeScript plugin to use Pull to Refresh on any view.

npm npm stars forks license nStudio banner

Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.


Installation

tns plugin add @nstudio/nativescript-pulltorefresh

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">
        <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)">
  <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">
      <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.

Changelog

Contributing

You can’t perform that action at this time.