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: 4 months 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 (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2021-06-24T15:21:51.000Z (over 4 years ago)
- Last Synced: 2024-04-13T17:13:24.145Z (almost 2 years 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 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/nativescript-pulltorefresh@2.0.0
```
#### [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 |
| ---------------------------------------------- | -------------------------------------- |
|  |  |
## 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)