https://github.com/nstudio/nativescript-pulltorefresh

:recycle: NativeScript plugin for PullToRefresh controls
https://github.com/nstudio/nativescript-pulltorefresh

android ios nativescript nativescript-plugin nativescript-pulltorefresh typescript

Last synced: 20 days ago
JSON representation

:recycle: NativeScript plugin for PullToRefresh controls

• Host: GitHub
• URL: https://github.com/nstudio/nativescript-pulltorefresh
• Owner: nstudio
• License: other
• Archived: true
• Created: 2016-02-04T15:41:39.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2021-06-24T15:21:51.000Z (over 3 years ago)
• Last Synced: 2024-04-13T17:13:24.145Z (10 months ago)
• Topics: android, ios, nativescript, nativescript-plugin, nativescript-pulltorefresh, typescript
• Language: TypeScript
• Homepage:
• Size: 17.6 MB
• Stars: 143
• Watchers: 5
• Forks: 27
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

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+:

```bash

ns plugin add @nstudio/nativescript-pulltorefresh

```

#### NativeScript prior to 7:

```bash

tns plugin add @nstudio/[email protected]

```

#### [Android - _SwipeRefreshLayout_](http://developer.android.com/reference/android/support/v4/widget/SwipeRefreshLayout.html)

#### [iOS - _UIRefreshControl_](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIRefreshControl_class/)

### Sample Screen

| Android                                        | iOS                                    |

| ---------------------------------------------- | -------------------------------------- |

| ![Android Sample](screens/android_refresh.gif) | ![iOS Sample](screens/ios_refresh.gif) |

## Usage

### NativeScript Core

#### XML

```xml

    

        

            

                

            

        

    

```

#### JS

```javascript

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

```typescript

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

```html

  

    

      

    

  

```

### NativeScript Vue

```javascript

import Vue from 'nativescript-vue';

Vue.registerElement(

  'PullToRefresh',

  () => require('@nstudio/nativescript-pulltorefresh').PullToRefresh

);

```

#### Component

```vue

  

    

      

        

          

          

        

      

    

  

export default {

  methods: {

    refreshList(args) {

      var pullRefresh = args.object;

      setTimeout(function () {

        pullRefresh.refreshing = false;

      }, 1000);

    },

  },

};

```

## 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](./CHANGELOG.md)

## [Contributing](./CONTRIBUTING.md)