nstudio / Nativescript Pulltorefresh
Licence: other
♻️ NativeScript plugin for PullToRefresh controls
Stars: ✭ 144
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Nativescript Pulltorefresh
Nativescript Speech Recognition
💬 Speech to text, using the awesome engines readily available on the device.
Stars: ✭ 72 (-50%)
Mutual labels: nativescript
Nativescript Drop Down
A NativeScript DropDown widget.
Stars: ✭ 107 (-25.69%)
Mutual labels: nativescript
Nativescript Feedback
📢 Non-blocking textual feedback for your NativeScript app
Stars: ✭ 127 (-11.81%)
Mutual labels: nativescript
Nativescript Localize
Internationalization plugin for NativeScript using native capabilities of each platform
Stars: ✭ 78 (-45.83%)
Mutual labels: nativescript
Nativescript App Templates
Monorepo for NativeScript app templates
Stars: ✭ 108 (-25%)
Mutual labels: nativescript
Nativescript Ui Feedback
This repository is used for customer feedback regarding Telerik UI for NativeScript. The issues system here is used by customers who want to submit their feature requests or vote for existing ones.
Stars: ✭ 110 (-23.61%)
Mutual labels: nativescript
Nativescript Dev Appium
A package to help with writing and executing e2e Appium tests in NativeScript apps
Stars: ✭ 69 (-52.08%)
Mutual labels: nativescript
Nativescript Floatingactionbutton
Material Design Floating Action Button in NativeScript apps.
Stars: ✭ 133 (-7.64%)
Mutual labels: nativescript
Nativescript Ar
Augmented Reality NativeScript plugin
Stars: ✭ 107 (-25.69%)
Mutual labels: nativescript
Push Plugin
Contains the source code for the Push Plugin.
Stars: ✭ 122 (-15.28%)
Mutual labels: nativescript
Nativescript Purchase
💰 A NativeScript plugin for making in-app purchases!
Stars: ✭ 80 (-44.44%)
Mutual labels: nativescript
Mln
高性能、小巧、易上手的移动跨平台开发框架. A framework for building Mobile cross-platform apps with Lua
Stars: ✭ 1,343 (+832.64%)
Mutual labels: nativescript
Nativescript Checkbox
NativeScript plugin for checkbox UI component
Stars: ✭ 113 (-21.53%)
Mutual labels: nativescript
Nativescript Angular
Integrating NativeScript with Angular
Stars: ✭ 1,203 (+735.42%)
Mutual labels: nativescript
Nativescript Geolocation
Geolocation plugin to use for getting current location, monitor movement, etc
Stars: ✭ 127 (-11.81%)
Mutual labels: nativescript
Nativescript Yoonit Camera
The most advanced and modern NativeScript Camera module for Android and iOS with a lot of awesome features
Stars: ✭ 69 (-52.08%)
Mutual labels: nativescript
Nativescript App Sync
♻️ Update your app without going through the app store!
Stars: ✭ 108 (-25%)
Mutual labels: nativescript
Awesome Nativescript Vue
Resources for nativescript vue
Stars: ✭ 142 (-1.39%)
Mutual labels: nativescript
Nativescript Fingerprint Auth
💅 👱♂️ Forget passwords, use a fingerprint scanner or facial recognition!
Stars: ✭ 130 (-9.72%)
Mutual labels: nativescript
Nativescript Videoplayer
🎬 Video Player widget for NativeScript apps
Stars: ✭ 122 (-15.28%)
Mutual labels: nativescript
NativeScript-PullToRefresh
NativeScript plugin to use Pull to Refresh on any view.
Installation
NativeScript 7+:
ns plugin add @nstudio/nativescript-pulltorefresh
NativeScript prior to 7:
tns plugin add @nstudio/[email protected]
Android - SwipeRefreshLayout
iOS - UIRefreshControl
Sample Screen
Android | iOS |
---|---|
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].