@nstudio/nativescript-pulltorefresh
by nStudio | v3.0.1
A NativeScript plugin to provide the Pull to Refresh control on any view.
npm i --save @nstudio/nativescript-pulltorefresh
  • Version: 3.0.1
  • GitHub:
  • Downloads:
    • Last Day:   535
    • Last Week:  3475
    • Last Month: 14594

NativeScript-PullToRefresh

NativeScript plugin to use Pull to Refresh on any view.

npm npm


Installation

NativeScript 7+:

ns plugin add @nstudio/nativescript-pulltorefresh

NativeScript prior to 7:

tns plugin add @nstudio/nativescript-pulltorefresh@2.1.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