NativeScript-Lottie

NativeScript plugin to expose Airbnb Lottie for awesome animations.

Uses Airbnb Lottie for Android and iOS Lottie for iOS.

Demo Screen

The .gif does not do the fluid animations justice

Installation

To install execute:

NativeScript 4x

tns plugin add nativescript-lottie

NativeScript 3x-

tns plugin add [email protected]

Usage

Plain {N}

XML

<Page
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:Lottie="nativescript-lottie" navigatingTo="navigatingTo" class="page">
    <StackLayout>
        <Lottie:LottieView src="PinJump.json" height="130" loop="true" autoPlay="true" loaded="yourLoadedEvent" />
    </StackLayout>
</Page>

TS

import { LottieView } from "nativescript-lottie";

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

{N} with Angular

XML

<StackLayout>
    <LottieView width="100" height="150" [src]="src" [loop]="loop" [autoPlay]="autoPlay" (loaded)="lottieViewLoaded($event)">     </LottieView>
</StackLayout>

Component

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

registerElement('LottieView', () => LottieView);

@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;
  }
}

Assets

🔥 You can find animations in the sample-effects folder.

Android

Place your animation files in the NS app's app_resources/android/src/main/assets folder.

iOS

Place your animations files in your app/App_Resources/iOS/ folder.

Properties (bindable)

Property	Type	Default	Description
autoPlay	boolean	false	Start LottieView animation on load if true.
loop	boolean	false	Loop continuously animation if true.
src	string	null	Animation path to .json file.

Properties

Property	Type	Default	Description
progress	number	0	Get/set the progress of the animation.
speed	number	1	Get/set the animation's speed

Methods

Method	Return	Parameters	Description
startAnimation	void	None	Starts the animation for the LottieView instance.
cancelAnimation	void	None	Pauses the animation for the LottieView instance.
isAnimating	boolean	None	Returns true if the LottieView is animating, else false.

Contributors

bradmartin	NathanWalker	rhanb