nativescript-shimmer

Facebook shimmer effect for your NativeScript app - iOS and Android.


Keywords
NativeScript, JavaScript, Android, iOS, Shimmer, Facebook, Effects, facebook-shimmer
License
BSD-3-Clause
Install
npm install nativescript-shimmer@2.1.0

Documentation

NativeScript Shimmer

Facebook shimmer effect for your NativeScript app.

Uses the following native plugins:

Demo

Demo

Usage

  • main-page.xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
  xmlns:sh="nativescript-shimmer" 
  loaded="pageLoaded">
  <StackLayout>
    <sh:Shimmer id="shimmer">
      <Label text="Shimmer" />     
    </sh:Shimmer>
    <Button text="Toggle" tap="{{toggleShimmer}}" />
  </StackLayout>
</Page>
  • main-page.ts:
import {EventData, Observable} from "data/observable";
import {Page} from "ui/page";

// Event handler for Page "loaded" event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
    // Get the event sender
    let page = <Page>args.object;
    page.bindingContext = new ShimmerDemo(page);
}

class ShimmerDemo extends Observable {
  private _enableTxt: string;
  private _shimmer: any;

  constructor(page: Page) {
    super();
    this._shimmer = page.getViewById('shimmer');
  }

  public toggleShimmer() {
    this._shimmer.enabled = !this._shimmer.enabled;
  }
}

LICENSE

BSD