nativescript-pulltorefresh

♻️ NativeScript plugin for PullToRefresh controls

Showing:

Popularity

Downloads/wk

5

GitHub Stars

144

Maintenance

Last Commit

4mos ago

Contributors

19

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Deprecated!
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.

Readme

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

AndroidiOS
Android SampleiOS 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial