@nativescript-community/ui-pulltorefresh

A NativeScript plugin to provide the Pull to Refresh control on any view.

iOS Demo	Android Demo

Table of Contents

• Installation * [Android - SwipeRefreshLayout](#android---_swiperefreshlayout_httpdeveloperandroidcomreferenceandroidsupportv4widgetswiperefreshlayouthtml) * [iOS - UIRefreshControl](#ios---_uirefreshcontrol_httpsdeveloperapplecomlibraryiosdocumentationuikitreferenceuirefreshcontrol_class)
• Usage
  • NativeScript (Core)
    • XML
    • TS
  • NativeScript Angular
    • Module
    • XML
    • Component
• NativeScript Vue
  • Bootstrap
  • Component
• Assets
  • Android
  • iOS
• Properties (bindable)
• Properties
• Methods
• Contributors
• Demos and Development
  • Repo Setup
  • Build
  • Demos
• Contributing
  • Update repo
  • Update readme
  • Update doc
  • Publish
  • modifying submodules
• Questions

Installation

Run the following command from the root of your project:

ns plugin add @nativescript-community/ui-pulltorefresh

Android - SwipeRefreshLayout

iOS - UIRefreshControl

Usage

NativeScript (Core)

XML

    
        
    

Copy

TS

import { LottieView } from "@nativescript-community/ui-lottie";

public yourLoadedEvent(args) {
    this._myLottie = args.object as LottieView; /// this is the instance of the LottieAnimationView
}
Copy

---

NativeScript Angular

Module

First you need to include the NativeScriptLottieModule in your app.module.ts

import { NativeScriptLottieModule} from '@nativescript-community/ui-lottie/angular';

@NgModule({
    imports: [
        NativeScriptLottieModule
    ],
    ...
})
Copy

XML

         

Copy

Component

import { Component } from '@angular/core';
import { LottieView } from '@nativescript-community/ui-lottie';

@Component({
  templateUrl: 'home.component.html',
  moduleId: module.id
})
export class HomeComponent {
  public loop: boolean = true;
  public src: string;
  public autoPlay: boolean = true;
  public animations: Array<string>;

  private _lottieView: LottieView;

  constructor() {
    this.animations = [
      'Mobilo/A.json',
      'Mobilo/D.json',
      'Mobilo/N.json',
      'Mobilo/S.json'
    ];
    this.src = this.animations[0];
  }

  lottieViewLoaded(event) {
    this._lottieView = <LottieView>event.object;
  }
}
Copy

---

NativeScript Vue

Bootstrap

If you want to use this plugin with Vue, do this in your app.js or main.js:

import LottieView from '@nativescript-community/ui-lottie/vue';

Vue.use(LottieView);
Copy

This will install and register LottieView component to your Vue instance and now you can use the plugin.

Component