nativescript-community / ui-lottie

NativeScript plugin to expose Airbnb Lottie

nativescript-community/ui-lottie

NativeScript plugin to expose Airbnb Lottie for awesome animations.

Changelog

All notable changes to this project will be documented in the changelog.

Demo Screen

The .gif does not do the fluid animations justice

Installation

To install execute:

tns plugin add @nativescript-community/ui-lottie

Usage

NativeScript (Core)

XML

<Page
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:Lottie="@nativescript-community/ui-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-community/ui-lottie";

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

---

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
    ],
    ...
})

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

---

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);

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

Component

<template>
    <Page class="page">
        <StackLayout>
            <LottieView height="130" src="PinJump.json" :loop="true" :autoPlay="true" @loaded="lottieViewLoaded"></LottieView>
        </StackLayout>
    </page
</template>

<script>
    export default {
        methods: {
            lottieViewLoaded(args) {
                this._lottieView = args.object;
            },
        },
        data() {
            return {
                _lottieView: null,
            }
        }
    };
</script>

---

Assets

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

Android

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

Note: In a nativescript-vue project the above folder may not exist. Place the files in platforms/android/app/src/main/assets.

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
completionBlock	(boolean) => void	null	Completion block to be executed upon completion of the animation. The animation is considered complete when it finishes playing and is no longer looping.
duration	number	null	Get the duration of the animation.
progress	number	0	Get/set the progress of the animation.
speed	number	1	Get/set the speed of the animation.

Methods

Method	Return	Parameters	Description
cancelAnimation	void	None	Pauses the animation for the LottieView instance.
isAnimating	boolean	None	Returns true if the LottieView is animating, else false.
playAnimation	void	None	Plays the animation for the LottieView instance.
playAnimationFromProgressToProgress	void	startProgress, endProgress	Plays the animation for the LottieView instance from the specified start and end progress values (between 0 and 1).
setColor	void	value, keyPath	Sets the provided color value on each property that matches the specified keyPath in the LottieView instance.
setOpacity	void	value, keyPath	Sets the provided opacity value (0 - 1) on each property that matches the specified keyPath in the LottieView instance.

Contributors

bradmartin	NathanWalker	rhanb	HamdiWanis

itstheceo	mudlabs

ui-lottie's Issues

iOS support

Hello, Brad!

I found this awesome lib by airbnb and decided to write a plugin for NS. That's awesome that you have already done this) I offer you an extra pair of hands to work on this awesome plugin. Just wanted to ask if you already started the iOS implementation so I can pull the most fresh code.

publish latest version

hey brad, when you have time kindly publish the latest version to npm as I'd like to use the dynamic colors feature. thanks :)

Documentation for JavaScript implementation?

I'm really excited to use this plugin but I can't yet get it to work in a JavaScript (not TS) environment.

I have this loader object defined in XML:

<Page
    navigatedTo="navigatedTo"
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:Lottie="nativescript-lottie">

    <StackLayout height="300" class="loader-container" horizontalAlignment="center" verticalAlignment="center">
        <Lottie:LottieView height="150" id="lottieLoader" src="lottieLoader.json" loop="true" autoplay="true" loaded="lottieLoaded" />
    </StackLayout>
</Page>

And the lottieLoader.json in the /platforms/android/main/assets/ folder. I always rebuild and uninstall/reinstall on device/emulator before test, but the object never appears on the page (or even takes up any page space).

I try to catalogue the events, but I can't link the loader object in XML to the JavaScript:

var lottieModule = require("nativescript-lottie").LottieView;
var lottieLoader;

exports.lottieLoaded = function(args){
    lottieLoader = new lottieModule(args.object);
    console.log(lottieLoader.isAnimating());
}

In this above example, the emulator (not the console) outputs on the screen:

Cannot read property 'isAnimating' of undefined, undefined

Can we please have a JavaScript example? Where am I going wrong in my code?

"lottie.ts is missing from the TypeScript compilation" error running samples

Hi.

I was expecting to be able to clone this repo, navigate into the "demo-angular" folder, then run npm i and tns run ios to see a the app running on my machine.

When I do the run command though it gives me this error:

ERROR in /Users/jim/Forked-Git-Projects/nativescript-lottie/src/lottie.ts
Module build failed (from ../node_modules/@ngtools/webpack/src/index.js):
Error: /Users/jim/Forked-Git-Projects/nativescript-lottie/src/lottie.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at NativeScriptAngularCompilerPlugin.getCompiledFile (/Users/jim/Forked-Git-Projects/nativescript-lottie/demo-angular/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:949:23)
    at NativeScriptAngularCompilerPlugin.getCompiledFile (/Users/jim/Forked-Git-Projects/nativescript-lottie/demo-angular/node_modules/@nativescript/webpack/plugins/NativeScriptAngularCompilerPlugin.js:29:26)
    at /Users/jim/Forked-Git-Projects/nativescript-lottie/demo-angular/node_modules/@ngtools/webpack/src/loader.js:43:31
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
 @ ./app/home/home.component.ts 4:0-49 7:36-46
 @ ./app/app-routing.module.ts
 @ ./app/app.module.ts
 @ ./main.ts

I tried this on node v14.15.4 and v13.something

Am I doing something wrong here or missing an extra step? If so, would probably be nice to add a note in the README for how to run the example projects. Thanks!

Cannot read property 'CacheStrategy' of undefined

After installing the plugin and setting up a basic example (like described in Readme), when I try to run the app, I get the error:

JS: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'CacheStrategy' of undefined
JS: TypeError: Cannot read property 'CacheStrategy' of undefined
JS: at exports.CacheStrategy.exports.CacheStrategy (file:///data/data/ch.inaffect.yoojis.kies/files/app/tns_modules/nativescript-lottie/nativescript-lottie.js:151:80)
JS: at Object. (file:///data/data/ch.inaffect.yoojis.kies/files/app/tns_modules/nativescript-lottie/nativescript-lottie.js:154:3)
JS: at require (:1:266)
JS: at Object. (file:///data/data/ch.inaffect.yoojis.kies/files/app/cars/car-list.component.js:5:29)
JS: at require (:1:266)
JS: at Object. (file:///data/data/ch.inaffect.yoojis.kies/files/app/cars/cars.module.js:12:28)
JS: at require (:1:266)
JS: at file:///data/data/ch.inaffect.yoojis.kies/files/app/tns_modules/tns-core-modules/globals/globals.js:92:32
JS: at new ZoneAwarePromise (file:///data/data/ch.inaffect.yoojis.kies/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:777:29)
JS: at Object.import (file:///data/data/ch.inaffect.yoojis.kies/files/app/tns_modules/tns-core-modules/globals/globals.js:90:16)
JS: at SystemJsNgModuleLoader.loadAndCompile (file:///data/data/ch.inaffect.yoojis.kies/files/app/tns_modules/@angular/core/bundles/core.umd.js:6608:29)
JS: at SystemJsNgModuleLoader.load (file:///data/data/ch.inaffect.yoojis.kies/files/app/tns_modules/@angular/core/bundles/core.umd.js:6592:60)
JS: at RouterConfigLoader.loadModuleFactory (file:///data/data/ch.inaffect.yoojis.kies/files/app/tns_modules/@angular/router/bundles/router.umd.js:4617:72)
JS: at RouterConfigLoader.load (file:///data/data/ch.inaffect.yoojis.kies/files/app/tns_modules/@angular/router/bundles/router.umd.js:4597:52)
JS: at MergeMapSubscriber.project (file:///data/data/ch.inaffect.yoojis.kies/files/app/tns_modules/@angular/router/bundles/router.umd.js:2083:74)
13:11:37 - Starting compilation in watch mode...

I am using nativescript-angular

Enhancement: propertyChange events

Add propertyChange events for:

• src
• loop
• autoPlay

Doesn't autoplay animation when changing the src (on ios)

I have a lottie with autoPlay true and after the update to ns7 it stopped working on ios, on android works fine.
It has autoPlay true so it starts on load, but when I change the src to another animation file, the second animation doesn't start.

This is the code, I'm using Nativescript Vue.
It should play animation1 -> animation2 -> animation3
data:

 data() {
      return {
        src: 'res://animation1.json',
        play: 1
      }
    },

template:
<LottieView row="0" :src="src" loop="false" autoPlay="true" :completionBlock="onComplete" ></LottieView>
methods:

onComplete(isComplete: boolean): void {

        console.log('oncomplete lottie ', this.src, isComplete)

        if (!isComplete)
          return
        
        if (this.play == 1)
        {
          this.play = 2
          this.src = 'res://animation2.json'
          return
        }

        this.src = 'res://animation3.json'

      }

Taking a look at the source, it seems that the lottie.ios.ts file is missing something like this in the srcProperty
(lottie.android.ts has that)

 if (this.autoPlay) {
        this.playAnimation();
      }

Unable to build for iOS, Pod build fails

Here is the error that I get

2021-07-07 16:41:28.080 xcodebuild[84894:1150648] CFURLRequestSetHTTPCookieStorageAcceptPolicy_block_invoke: no longer implemented and should not be called
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedButton.swift:31:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedButton.swift:36:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedSwitch.swift:76:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedSwitch.swift:92:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedSwitch.swift:107:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/LayerContainers/AnimationContainer.swift:187:88: error: type 'CAMediaTimingFunctionName' (aka 'NSString') has no member 'linear'
      animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
                                                             ~~~~~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/Animation/AnimationView.swift:774:77: error: type 'String' has no member 'linear'
      CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: .linear))
                                                                           ~^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/Animation/AnimationView.swift:971:53: error: type 'CAMediaTimingFillMode' (aka 'NSString') has no member 'both'
    layerAnimation.fillMode = CAMediaTimingFillMode.both
                              ~~~~~~~~~~~~~~~~~~~~~ ^~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedButton.swift:31:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedButton.swift:36:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedSwitch.swift:76:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedSwitch.swift:92:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedSwitch.swift:107:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/LayerContainers/AnimationContainer.swift:187:88: error: type 'CAMediaTimingFunctionName' (aka 'NSString') has no member 'linear'
      animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
                                                             ~~~~~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/Animation/AnimationView.swift:774:77: error: type 'String' has no member 'linear'
      CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: .linear))
                                                                           ~^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/Animation/AnimationView.swift:971:53: error: type 'CAMediaTimingFillMode' (aka 'NSString') has no member 'both'
    layerAnimation.fillMode = CAMediaTimingFillMode.both
                              ~~~~~~~~~~~~~~~~~~~~~ ^~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedButton.swift:31:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedButton.swift:36:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedSwitch.swift:76:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedSwitch.swift:92:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedSwitch.swift:107:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/LayerContainers/AnimationContainer.swift:187:88: error: type 'CAMediaTimingFunctionName' (aka 'NSString') has no member 'linear'
      animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
                                                             ~~~~~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/Animation/AnimationView.swift:774:77: error: type 'String' has no member 'linear'
      CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: .linear))
                                                                           ~^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/Animation/AnimationView.swift:971:53: error: type 'CAMediaTimingFillMode' (aka 'NSString') has no member 'both'
    layerAnimation.fillMode = CAMediaTimingFillMode.both
                              ~~~~~~~~~~~~~~~~~~~~~ ^~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedButton.swift:31:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedButton.swift:36:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedSwitch.swift:76:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedSwitch.swift:92:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/AnimatedSwitch.swift:107:54: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'button'
    self.accessibilityTraits = UIAccessibilityTraits.button
                               ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/LayerContainers/AnimationContainer.swift:187:88: error: type 'CAMediaTimingFunctionName' (aka 'NSString') has no member 'linear'
      animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
                                                             ~~~~~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/Animation/AnimationView.swift:774:77: error: type 'String' has no member 'linear'
      CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: .linear))
                                                                           ~^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/Animation/AnimationView.swift:971:53: error: type 'CAMediaTimingFillMode' (aka 'NSString') has no member 'both'
    layerAnimation.fillMode = CAMediaTimingFillMode.both
                              ~~~~~~~~~~~~~~~~~~~~~ ^~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/FillRenderer.swift:25:35: error: type 'CAShapeLayerFillRule' (aka 'NSString') has no member 'evenOdd'
      return CAShapeLayerFillRule.evenOdd
             ~~~~~~~~~~~~~~~~~~~~ ^~~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/FillRenderer.swift:27:35: error: type 'CAShapeLayerFillRule' (aka 'NSString') has no member 'nonZero'
      return CAShapeLayerFillRule.nonZero
             ~~~~~~~~~~~~~~~~~~~~ ^~~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/FillRenderer.swift:40:31: error: 'CAShapeLayerFillRule' (aka 'NSString') is not implicitly convertible to 'String'; did you mean to use 'as' to explicitly convert?
    layer.fillRule = fillRule.caFillRule
                              ^
                                         as String
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/LayerContainers/CompLayers/ImageCompositionLayer.swift:30:60: error: type 'CALayerContentsGravity' (aka 'NSString') has no member 'resize'
    contentsLayer.contentsGravity = CALayerContentsGravity.resize
                                    ~~~~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/LottieView.swift:40:121: error: 'willEnterForegroundNotification' has been renamed to 'NSNotification.Name.UIApplicationWillEnterForeground'
    NotificationCenter.default.addObserver(self, selector: #selector(animationWillEnterForeground), name: UIApplication.willEnterForegroundNotification, object: nil)
                                                                                                                        ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                                                                                                                        NSNotification.Name.UIApplicationWillEnterForeground
UIKit.UIApplication:28:22: note: 'willEnterForegroundNotification' was introduced in Swift 4.2
    public class let willEnterForegroundNotification: NSNotification.Name
                     ^
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/LottieView.swift:41:122: error: 'didEnterBackgroundNotification' has been renamed to 'NSNotification.Name.UIApplicationDidEnterBackground'
    NotificationCenter.default.addObserver(self, selector: #selector(animationWillMoveToBackground), name: UIApplication.didEnterBackgroundNotification, object: nil)
                                                                                                                         ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                                                                                                                         NSNotification.Name.UIApplicationDidEnterBackground
UIKit.UIApplication:25:22: note: 'didEnterBackgroundNotification' was introduced in Swift 4.2
    public class let didEnterBackgroundNotification: NSNotification.Name
                     ^
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/LayerContainers/CompLayers/MaskContainerLayer.swift:98:47: error: type 'CAShapeLayerFillRule' (aka 'NSString') has no member 'evenOdd'
    maskLayer.fillRule = CAShapeLayerFillRule.evenOdd
                         ~~~~~~~~~~~~~~~~~~~~ ^~~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/LottieView.swift:40:121: error: 'willEnterForegroundNotification' has been renamed to 'NSNotification.Name.UIApplicationWillEnterForeground'
    NotificationCenter.default.addObserver(self, selector: #selector(animationWillEnterForeground), name: UIApplication.willEnterForegroundNotification, object: nil)
                                                                                                                        ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                                                                                                                        NSNotification.Name.UIApplicationWillEnterForeground
UIKit.UIApplication:28:22: note: 'willEnterForegroundNotification' was introduced in Swift 4.2
    public class let willEnterForegroundNotification: NSNotification.Name
                     ^
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Public/iOS/LottieView.swift:41:122: error: 'didEnterBackgroundNotification' has been renamed to 'NSNotification.Name.UIApplicationDidEnterBackground'
    NotificationCenter.default.addObserver(self, selector: #selector(animationWillMoveToBackground), name: UIApplication.didEnterBackgroundNotification, object: nil)
                                                                                                                         ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                                                                                                                         NSNotification.Name.UIApplicationDidEnterBackground
UIKit.UIApplication:25:22: note: 'didEnterBackgroundNotification' was introduced in Swift 4.2
    public class let didEnterBackgroundNotification: NSNotification.Name
                     ^
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/LayerContainers/CompLayers/MaskContainerLayer.swift:98:47: error: type 'CAShapeLayerFillRule' (aka 'NSString') has no member 'evenOdd'
    maskLayer.fillRule = CAShapeLayerFillRule.evenOdd
                         ~~~~~~~~~~~~~~~~~~~~ ^~~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:28:35: error: type 'CAShapeLayerLineJoin' (aka 'NSString') has no member 'miter'
      return CAShapeLayerLineJoin.miter
             ~~~~~~~~~~~~~~~~~~~~ ^~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:30:35: error: type 'CAShapeLayerLineJoin' (aka 'NSString') has no member 'miter'
      return CAShapeLayerLineJoin.miter
             ~~~~~~~~~~~~~~~~~~~~ ^~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:32:35: error: type 'CAShapeLayerLineJoin' (aka 'NSString') has no member 'round'
      return CAShapeLayerLineJoin.round
             ~~~~~~~~~~~~~~~~~~~~ ^~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:34:35: error: type 'CAShapeLayerLineJoin' (aka 'NSString') has no member 'bevel'
      return CAShapeLayerLineJoin.bevel
             ~~~~~~~~~~~~~~~~~~~~ ^~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:56:34: error: type 'CAShapeLayerLineCap' (aka 'NSString') has no member 'butt'
      return CAShapeLayerLineCap.butt
             ~~~~~~~~~~~~~~~~~~~ ^~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:58:34: error: type 'CAShapeLayerLineCap' (aka 'NSString') has no member 'butt'
      return CAShapeLayerLineCap.butt
             ~~~~~~~~~~~~~~~~~~~ ^~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:60:34: error: type 'CAShapeLayerLineCap' (aka 'NSString') has no member 'round'
      return CAShapeLayerLineCap.round
             ~~~~~~~~~~~~~~~~~~~ ^~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:62:34: error: type 'CAShapeLayerLineCap' (aka 'NSString') has no member 'square'
      return CAShapeLayerLineCap.square
             ~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:154:31: error: 'CAShapeLayerLineJoin' (aka 'NSString') is not implicitly convertible to 'String'; did you mean to use 'as' to explicitly convert?
    layer.lineJoin = lineJoin.caLineJoin
                              ^
                                         as String
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:155:29: error: 'CAShapeLayerLineCap' (aka 'NSString') is not implicitly convertible to 'String'; did you mean to use 'as' to explicitly convert?
    layer.lineCap = lineCap.caLineCap
                            ^
                                      as String
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/LayerContainers/CompLayers/TextCompositionLayer.swift:35:15: error: type 'CATextLayerAlignmentMode' (aka 'NSString') has no member 'left'
      return .left
             ~^~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/LayerContainers/CompLayers/TextCompositionLayer.swift:37:15: error: type 'CATextLayerAlignmentMode' (aka 'NSString') has no member 'right'
      return .right
             ~^~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/LayerContainers/CompLayers/TextCompositionLayer.swift:39:15: error: type 'CATextLayerAlignmentMode' (aka 'NSString') has no member 'center'
      return .center
             ~^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:28:35: error: type 'CAShapeLayerLineJoin' (aka 'NSString') has no member 'miter'
      return CAShapeLayerLineJoin.miter
             ~~~~~~~~~~~~~~~~~~~~ ^~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:30:35: error: type 'CAShapeLayerLineJoin' (aka 'NSString') has no member 'miter'
      return CAShapeLayerLineJoin.miter
             ~~~~~~~~~~~~~~~~~~~~ ^~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:32:35: error: type 'CAShapeLayerLineJoin' (aka 'NSString') has no member 'round'
      return CAShapeLayerLineJoin.round
             ~~~~~~~~~~~~~~~~~~~~ ^~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:34:35: error: type 'CAShapeLayerLineJoin' (aka 'NSString') has no member 'bevel'
      return CAShapeLayerLineJoin.bevel
             ~~~~~~~~~~~~~~~~~~~~ ^~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:56:34: error: type 'CAShapeLayerLineCap' (aka 'NSString') has no member 'butt'
      return CAShapeLayerLineCap.butt
             ~~~~~~~~~~~~~~~~~~~ ^~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:58:34: error: type 'CAShapeLayerLineCap' (aka 'NSString') has no member 'butt'
      return CAShapeLayerLineCap.butt
             ~~~~~~~~~~~~~~~~~~~ ^~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:60:34: error: type 'CAShapeLayerLineCap' (aka 'NSString') has no member 'round'
      return CAShapeLayerLineCap.round
             ~~~~~~~~~~~~~~~~~~~ ^~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:62:34: error: type 'CAShapeLayerLineCap' (aka 'NSString') has no member 'square'
      return CAShapeLayerLineCap.square
             ~~~~~~~~~~~~~~~~~~~ ^~~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:154:31: error: 'CAShapeLayerLineJoin' (aka 'NSString') is not implicitly convertible to 'String'; did you mean to use 'as' to explicitly convert?
    layer.lineJoin = lineJoin.caLineJoin
                              ^
                                         as String
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/NodeRenderSystem/Nodes/OutputNodes/Renderables/StrokeRenderer.swift:155:29: error: 'CAShapeLayerLineCap' (aka 'NSString') is not implicitly convertible to 'String'; did you mean to use 'as' to explicitly convert?
    layer.lineCap = lineCap.caLineCap
                            ^
                                      as String
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/LayerContainers/CompLayers/TextCompositionLayer.swift:35:15: error: type 'CATextLayerAlignmentMode' (aka 'NSString') has no member 'left'
      return .left
             ~^~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/LayerContainers/CompLayers/TextCompositionLayer.swift:37:15: error: type 'CATextLayerAlignmentMode' (aka 'NSString') has no member 'right'
      return .right
             ~^~~~~
/Users/shiv19/Work/Bevie/GFConnectNS/platforms/ios/Pods/lottie-ios/lottie-swift/src/Private/LayerContainers/CompLayers/TextCompositionLayer.swift:39:15: error: type 'CATextLayerAlignmentMode' (aka 'NSString') has no member 'center'
      return .center
             ~^~~~~~

animations stop on application suspend and resume

hi,
as I wrote in title, animations are stop after resume app

I tried to solve it with:

@Component({
    moduleId: module.id,
    selector: "NoNetPage",
    templateUrl: "./no-net-page.component.html",
    styleUrls: ["./no-net-page.component.scss"],
    providers: [BasicService]
})
export class NoNetPageComponent implements AfterViewInit {
    @ViewChild('wifi') wifi: LottieView;
    constructor(
        private _page: Page,
        private _service: BasicService
    ) {
        const t = this;

        application.on(application.resumeEvent, (args) => {
            const wifi = t.wifi;
            if (wifi !== undefined) {
                wifi.playAnimation();
            }
        });
    }
}

but when this runs the application will be crash with this message:
TypeError: t.playAnimation is not a function

btw, I am using nativescript-angular

Bad deprecation message on old `nativescript-lottie` package.

nativescript-lottie displays the following warning on install:

warning [email protected]: This package has been moved to @nativescript-community/ui-label. Please migrate your dependency to enjoy the latest working version of this plugin for NativeScript.

This should be corrected to:

warning [email protected]: This package has been moved to @nativescript-community/ui-lottie. Please migrate your dependency to enjoy the latest working version of this plugin for NativeScript.

Cannot read mkdirs of null

I'm not sure if this issue is in core, ui-lottie or I'm missing something?

I've made sure my file is in the right place.

System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onCreateView failed
System.err: TypeError: Cannot read property 'mkdirs' of null
System.err:
System.err: StackTrace:
System.err: ensureFile(file: node_modules/@nativescript/core/file-system/file-system-access.android.js:387:0)
System.err: at getFile(file: node_modules/@nativescript/core/file-system/file-system-access.android.js:41:0)
System.err: at fromPath(file: node_modules/@nativescript/core/file-system/index.js:136:0)
System.err: at loadLottieJSON(file: node_modules/@nativescript-community/ui-lottie/lottie.android.js:20:21)
System.err: at setSrc(file: node_modules/@nativescript-community/ui-lottie/lottie.android.js:127:0)
System.err: at [src:setNative](file: node_modules/@nativescript-community/ui-lottie/lottie.android.js:136:0)
System.err: at applyAllNativeSetters(file: node_modules/@nativescript/core/ui/core/properties/index.js:1136:0)
System.err: at initNativeView(file: node_modules/@nativescript/core/ui/core/properties/index.js:1079:0)
System.err: at onResumeNativeUpdates(file: node_modules/@nativescript/core/ui/core/view-base/index.js:737:22)
System.err: at _resumeNativeUpdates(file: node_modules/@nativescript/core/ui/core/view-base/index.js:280:0)
System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:235:0)
System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view/index.android.js:309:0)
System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:318:0)
System.err: at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:312:0)
System.err: at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:318:0)
System.err: at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:458:0)
System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:237:0)
System.err: at eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:0)
System.err: at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:759:0)
System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:236:0)
System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view/index.android.js:309:0)
System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:318:0)
System.err: at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:312:0)
System.err: at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:318:0)
System.err: at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:458:0)
System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:237:0)
System.err: at eachChildView(file: node_modules/@nativescript/core/ui/content-view/index.js:65:0)
System.err: at eachChildView(file: node_modules/@nativescript/core/ui/page/page-common.js:106:0)
System.err: at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:759:0)
System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:236:0)
System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view/index.android.js:309:0)
System.err: at onLoaded(file: node_modules/@nativescript/core/ui/page/index.android.js:38:0)
System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:318:0)
System.err: at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:312:0)
System.err: at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:318:0)
System.err: at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:458:0)
System.err: at _addViewCore(file: node_modules/@nativescript/core/ui/core/view-base/index.js:453:0)
System.err: at _addView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:439:0)
System.err: at onCreateView(file: node_modules/@nativescript/core/ui/frame/index.android.js:730:0)
System.err: at onCreateView(file: node_modules/@nativescript/core/ui/frame/fragment.android.js:25:0)
System.err: at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302)
System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1175)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1153)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1149)
System.err: at com.tns.FragmentClass.onCreateView(FragmentClass.java:55)
System.err: at androidx.fragment.app.Fragment.performCreateView(Fragment.java:2699)
System.err: at androidx.fragment.app.FragmentStateManager.createView(FragmentStateManager.java:320)
System.err: at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1199)
System.err: at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1368)
System.err: at androidx.fragment.app.FragmentManager.moveFragmentToExpectedState(FragmentManager.java:1446)
System.err: at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1509)
System.err: at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:447)
System.err: at androidx.fragment.app.FragmentManager.executeOps(FragmentManager.java:2181)
System.err: at androidx.fragment.app.FragmentManager.executeOpsTogether(FragmentManager.java:2004)
System.err: at androidx.fragment.app.FragmentManager.removeRedundantOperationsAndExecute(FragmentManager.java:1959)
System.err: at androidx.fragment.app.FragmentManager.execPendingActions(FragmentManager.java:1861)
System.err: at androidx.fragment.app.FragmentManager$4.run(FragmentManager.java:413)
System.err: at android.os.Handler.handleCallback(Handler.java:873)
System.err: at android.os.Handler.dispatchMessage(Handler.java:99)
System.err: at android.os.Looper.loop(Looper.java:193)
System.err: at android.app.ActivityThread.main(ActivityThread.java:6669)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
JS: uncaughterror Error: Calling js method onCreateView failed
JS: TypeError: Cannot read property 'mkdirs' of null
System.err: com.tns.NativeScriptException: Error: Calling js method onCreateView failed
System.err: TypeError: Cannot read property 'mkdirs' of null
System.err: at com.tns.Runtime.passExceptionToJsNative(Native Method)
System.err: at com.tns.Runtime.passUncaughtExceptionToJs(Runtime.java:84)
System.err: at com.tns.NativeScriptUncaughtExceptionHandler.uncaughtException(NativeScriptUncaughtExceptionHandler.java:34)
System.err: at com.google.android.gms.ads.internal.report.b.uncaughtException(:com.google.android.gms.policy_ads_fdr_dynamite@[email protected]:3)
System.err: at org.chromium.base.JavaExceptionReporter.uncaughtException(chromium-Monochrome.aab-stable-460608521:6)
System.err: at java.lang.ThreadGroup.uncaughtException(ThreadGroup.java:1068)
System.err: at java.lang.ThreadGroup.uncaughtException(ThreadGroup.java:1063)
System.err: at com.google.android.gms.ads.internal.report.c.uncaughtException(:com.google.android.gms.policy_ads_fdr_dynamite@[email protected]:3)
System.err: at java.lang.Thread.dispatchUncaughtException(Thread.java:1955)

Android app crashes on back navigation (4.0.0)

Hi,

First, thanks for a great plugin! :)
However, I've been running into an issue with 4.0.0 that only occurs on Android. Error occurs on simulators and physical devices, tested locally and in Firebase tests.

When I press the Android back navigation button, the app crashes and throws the following error:

System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onDismiss failed
System.err: Error: java.lang.IllegalStateException: Cannot remove Fragment attached to a different FragmentManager. Fragment fragment8[5]<Page(727)> is already attached to a FragmentManager.
System.err:     androidx.fragment.app.BackStackRecord.remove(BackStackRecord.java:188)
System.err:     com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1242)
System.err:     com.tns.Runtime.callJSMethodImpl(Runtime.java:1122)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:1109)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:1089)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:1081)
System.err:     com.tns.gen.androidx.fragment.app.DialogFragment_vendor_70990_26_DialogFragmentImpl.onDismiss(DialogFragment_vendor_70990_26_DialogFragmentImpl.java:25)
System.err:     android.app.Dialog$ListenersHandler.handleMessage(Dialog.java:1361)
System.err:     android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     android.os.Looper.loop(Looper.java:164)
System.err:     android.app.ActivityThread.main(ActivityThread.java:6494)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)
System.err: 
System.err: StackTrace:
System.err: 	Frame: function:'Frame.disposeCurrentFragment', file:'file:///node_modules/tns-core-modules/ui/frame/frame.js:181:20
System.err: 	Frame: function:'Frame.onUnloaded', file:'file:///node_modules/tns-core-modules/ui/frame/frame.js:171:13
System.err: 	Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:315:91
System.err: 	Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:304:8
System.err: 	Frame: function:'ViewBase.callUnloaded', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:315:13
System.err: 	Frame: function:'DialogFragmentImpl.onDismiss', file:'file:///node_modules/tns-core-modules/ui/core/view/view.js:148:22
System.err: 	at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: 	at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1242)
System.err: 	at com.tns.Runtime.callJSMethodImpl(Runtime.java:1122)
System.err: 	at com.tns.Runtime.callJSMethod(Runtime.java:1109)
System.err: 	at com.tns.Runtime.callJSMethod(Runtime.java:1089)
System.err: 	at com.tns.Runtime.callJSMethod(Runtime.java:1081)
System.err: 	at com.tns.gen.androidx.fragment.app.DialogFragment_vendor_70990_26_DialogFragmentImpl.onDismiss(DialogFragment_vendor_70990_26_DialogFragmentImpl.java:25)
System.err: 	at android.app.Dialog$ListenersHandler.handleMessage(Dialog.java:1361)
System.err: 	at android.os.Handler.dispatchMessage(Handler.java:106)
System.err: 	at android.os.Looper.loop(Looper.java:164)
System.err: 	at android.app.ActivityThread.main(ActivityThread.java:6494)
System.err: 	at java.lang.reflect.Method.invoke(Native Method)
System.err: 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
System.err: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)
System.err: Caused by: java.lang.IllegalStateException: Cannot remove Fragment attached to a different FragmentManager. Fragment fragment8[5]<Page(727)> is already attached to a FragmentManager.
System.err: 	at androidx.fragment.app.BackStackRecord.remove(BackStackRecord.java:188)
System.err: 	... 14 more

My package.json

"nativescript": {
    "id": "com.averly.mindcode",
    "tns-android": {
      "version": "6.0.2"
    },
    "tns-ios": {
      "version": "6.0.2"
    }
  },
  "dependencies": {
    "nativescript-appversion": "^1.4.2",
    "nativescript-audio": "^5.0.4",
    "nativescript-carousel": "^6.1.0",
    "nativescript-datetimepicker": "^1.2.1",
    "nativescript-fonticon": "^2.0.0",
    "nativescript-image-cache-it": "^4.1.2",
    "nativescript-local-notifications": "^4.0.1",
    "nativescript-lottie": "^4.0.0",
    "nativescript-plugin-firebase": "^9.0.4",
    "nativescript-purchase": "^2.0.9",
    "nativescript-ratings": "^1.0.1",
    "nativescript-taptic-engine": "^2.1.0",
    "nativescript-theme-core": "^1.0.4",
    "nativescript-ui-gauge": "5.0.0",
    "nativescript-videoplayer": "^4.2.1",
    "nativescript-vue": "^2.4.0",
    "nativescript-vue-star-rating": "0.0.4",
    "tns-core-modules": "^6.0.7",
    "uglifyjs-webpack-plugin": "^2.1.3",
    "vuex": "^3.1.0"
  },

Let me know if you need further info!

Inconsistent src requirements

There's an inconsistency with how the src must be described in xml.

<!-- Works on iOS, but not Android -->
<Lottie:LottieView src="lottie" />

<!-- Works on both platforms -->
<Lottie:LottieView src="lottie.json" />

Given all Lottie assets are JSON files it seems redundant having to include the extension.

code update

Hey Brad,

I migrated your project to the latest version of lottie. Had to modify the swift code a bit.
Now i did that as a fork because i wanted to change the plugin structure like i always do with my plugins.
https://github.com/farfromrefug/nativescript-lottie

let me know if you want a PR

Error building when src folder is present on App_Resources/Android

Gradle build...
         + applying user-defined configuration from /home/carlos/Documentos/Nativescript/<appname>/dist/app/App_Resources/Android/app.gradle
Configuration 'compile' in project ':app' is deprecated. Use 'implementation' instead.
Configuration 'debugCompile' in project ':app' is deprecated. Use 'debugImplementation' instead.
         + adding nativescript runtime package dependency: nativescript-optimized
         + adding aar plugin dependency: /home/carlos/Documentos/Nativescript/<appname>/dist/node_modules/nativescript-background-http/platforms/android/nativescript_background_http.aar
         + adding aar plugin dependency: /home/carlos/Documentos/Nativescript/<appname>/dist/node_modules/nativescript-camera/platforms/android/nativescript_camera.aar
         + adding aar plugin dependency: /home/carlos/Documentos/Nativescript/<appname>/dist/node_modules/nativescript-image-cache-it/platforms/android/nativescript_image_cache_it.aar
         + adding aar plugin dependency: /home/carlos/Documentos/Nativescript/<appname>/dist/node_modules/nativescript-imagepicker/platforms/android/nativescript_imagepicker.aar
         + adding aar plugin dependency: /home/carlos/Documentos/Nativescript/<appname>/dist/node_modules/nativescript-modal-datetimepicker/platforms/android/nativescript_modal_datetimepicker.aar
         + adding aar plugin dependency: /home/carlos/Documentos/Nativescript/<appname>/dist/node_modules/nativescript-plugin-firebase/platforms/android/firebase-release.aar
         + adding aar plugin dependency: /home/carlos/Documentos/Nativescript/<appname>/dist/node_modules/tns-core-modules-widgets/platforms/android/widgets-release.aar
registerResGeneratingTask is deprecated, use registerGeneratedFolders(FileCollection)
registerResGeneratingTask is deprecated, use registerGeneratedFolders(FileCollection)
/home/carlos/Documentos/Nativescript/<appname>/dist/platforms/android/app/build/intermediates/manifests/full/debug/AndroidManifest.xml:43: AAPT: error: resource drawable/icon (aka <appname>:drawable/icon) not found.
    
/home/carlos/Documentos/Nativescript/<appname>/dist/platforms/android/app/build/intermediates/manifests/full/debug/AndroidManifest.xml:43: error: resource drawable/icon (aka <appname>:drawable/icon) not found.
error: failed processing manifest.

Failed to execute aapt
com.android.ide.common.process.ProcessException: Failed to execute aapt
        at com.android.builder.core.AndroidBuilder.processResources(AndroidBuilder.java:796)
        at com.android.build.gradle.tasks.ProcessAndroidResources.invokeAaptForSplit(ProcessAndroidResources.java:551)
        at com.android.build.gradle.tasks.ProcessAndroidResources.doFullTaskAction(ProcessAndroidResources.java:285)
        at com.android.build.gradle.internal.tasks.IncrementalTask.taskAction(IncrementalTask.java:109)
        at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
        at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
        at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
        at java.lang.reflect.Method.invoke(Method.java:498)
        at org.gradle.internal.reflect.JavaMethod.invoke(JavaMethod.java:73)
        at org.gradle.api.internal.project.taskfactory.DefaultTaskClassInfoStore$IncrementalTaskAction.doExecute(DefaultTaskClassInfoStore.java:173)
        at org.gradle.api.internal.project.taskfactory.DefaultTaskClassInfoStore$StandardTaskAction.execute(DefaultTaskClassInfoStore.java:134)
        at org.gradle.api.internal.project.taskfactory.DefaultTaskClassInfoStore$StandardTaskAction.execute(DefaultTaskClassInfoStore.java:121)
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter$1.run(ExecuteActionsTaskExecuter.java:122)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:336)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:328)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor.execute(DefaultBuildOperationExecutor.java:197)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor.run(DefaultBuildOperationExecutor.java:107)
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeAction(ExecuteActionsTaskExecuter.java:111)
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeActions(ExecuteActionsTaskExecuter.java:92)
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.execute(ExecuteActionsTaskExecuter.java:70)
        at org.gradle.api.internal.tasks.execution.SkipUpToDateTaskExecuter.execute(SkipUpToDateTaskExecuter.java:63)
        at org.gradle.api.internal.tasks.execution.ResolveTaskOutputCachingStateExecuter.execute(ResolveTaskOutputCachingStateExecuter.java:54)
        at org.gradle.api.internal.tasks.execution.ValidatingTaskExecuter.execute(ValidatingTaskExecuter.java:58)
        at org.gradle.api.internal.tasks.execution.SkipEmptySourceFilesTaskExecuter.execute(SkipEmptySourceFilesTaskExecuter.java:88)
        at org.gradle.api.internal.tasks.execution.ResolveTaskArtifactStateTaskExecuter.execute(ResolveTaskArtifactStateTaskExecuter.java:52)
        at org.gradle.api.internal.tasks.execution.SkipTaskWithNoActionsExecuter.execute(SkipTaskWithNoActionsExecuter.java:52)
        at org.gradle.api.internal.tasks.execution.SkipOnlyIfTaskExecuter.execute(SkipOnlyIfTaskExecuter.java:54)
        at org.gradle.api.internal.tasks.execution.ExecuteAtMostOnceTaskExecuter.execute(ExecuteAtMostOnceTaskExecuter.java:43)
        at org.gradle.api.internal.tasks.execution.CatchExceptionTaskExecuter.execute(CatchExceptionTaskExecuter.java:34)
        at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter$EventFiringTaskWorker$1.run(DefaultTaskGraphExecuter.java:248)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:336)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:328)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor.execute(DefaultBuildOperationExecutor.java:197)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor.run(DefaultBuildOperationExecutor.java:107)
        at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter$EventFiringTaskWorker.execute(DefaultTaskGraphExecuter.java:241)
        at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter$EventFiringTaskWorker.execute(DefaultTaskGraphExecuter.java:230)
        at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker.processTask(DefaultTaskPlanExecutor.java:124)
        at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker.access$200(DefaultTaskPlanExecutor.java:80)
        at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker$1.execute(DefaultTaskPlanExecutor.java:105)
        at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker$1.execute(DefaultTaskPlanExecutor.java:99)
        at org.gradle.execution.taskgraph.DefaultTaskExecutionPlan.execute(DefaultTaskExecutionPlan.java:625)
        at org.gradle.execution.taskgraph.DefaultTaskExecutionPlan.executeWithTask(DefaultTaskExecutionPlan.java:580)

This happens when I try to do a clean build having the folder src located in App_Resources/Android.

Steps to be able to compile:

• Remove src folder
• Build
• Restore folder

So everytime I do a clean build, I need to remove the folder, otherwise it complains.

Using:

• NS v4
• NS-Vue | NS-NG

Frame support

Support setting the progress by frame and playing segments.

I think the following should be available:

setProgressWithFrame(frame)
playFromFrame(startFrame, endFrame)

I am completely confused

How do you get this working with the standard nativescript templates?

If I create a new project with say https://github.com/NativeScript/template-hello-world-ng

Then look at the your documentation ... it says just say add some code to the xml and then add some code to the TS,

But I'm really stuck .... as there is NO xml file in the templates, I thought I could just add to the html view ... however the main app one does declare <page

So can you add the following straight to the StackLayout instead like this:

<Lottie:LottieView src="PinJump.json" height="130" loop="true" autoPlay="true" loaded="yourLoadedEvent" />

Then regarding the .ts code ... in these templates you have main.ts, app.module.ts, app.component.ts etc so which one to add the code to?

I've tried and tried and can't get it working, but can the documentation PLEASE cover the various native script project types, pure js, pure ts and angular + ts

Request: Angular Support

Working with Lottie files that has image references

I wanted to use these animation on my NativeScript app: https://www.lottiefiles.com/2668-ball But it didn't work. Probably I need to place ball image to a special folder or set it via a method/property. Any suggestion?

How to use theme?

Could someone build a simple Playground example of how to use theme, I don't get it?

Can't play .lottie files

The nativescript-lottie couldn't play a .lottie file

Enhancement: wire up CacheStrategy from native source

https://github.com/airbnb/lottie-android/blob/master/lottie/src/main/java/com/airbnb/lottie/LottieAnimationView.java#L45

Exception on Android 9

I faced a weird issue on android 9

java.lang.IllegalArgumentException: Invalid Layer Save Flag - only ALL_SAVE_FLAGS is allowed

On android 8 everything works like a charm

Splash screen lottie

Hello, any tutorial how to do splash screen with json(animated) file

Nativescript 6.2 not build

I put my json animation files into App_Resources/assets/ but faild

Execution failed for task ':app:mergeDebugResources'.
/**/platforms/android/app/src/main/res/assets/success.json: Error: The file name must end with .xml

Error while generating the main dex list

There's some kind of incompatibility with nativescript-firebase and nativescript-lottie that I'm trying to figure out. I can't seem to include the two together (in a clean new nativescript project).

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:transformClassesWithMultidexlistForRelease'.
> com.android.build.api.transform.TransformException: Error while generating the main dex list.

Here's what my package.json looks like:

{
	"description": "NativeScript Application",
	"license": "SEE LICENSE IN <your-license-filename>",
	"readme": "NativeScript Application",
	"repository": "<fill-your-repository-here>",
	"nativescript": {
		"id": "org.nativescript.test",
		"tns-android": {
			"version": "4.1.3"
		}
	},
	"dependencies": {
		"@angular/animations": "~6.0.0",
		"@angular/common": "~6.0.0",
		"@angular/compiler": "~6.0.0",
		"@angular/core": "~6.0.0",
		"@angular/forms": "~6.0.0",
		"@angular/http": "~6.0.0",
		"@angular/platform-browser": "~6.0.0",
		"@angular/platform-browser-dynamic": "~6.0.0",
		"@angular/router": "~6.0.0",
		"nativescript-angular": "~6.0.0",
		"nativescript-lottie": "^2.1.0",
		"nativescript-plugin-firebase": "^6.4.0",
		"nativescript-theme-core": "~1.0.4",
		"reflect-metadata": "~0.1.8",
		"rxjs": "~6.1.0",
		"tns-core-modules": "~4.1.0",
		"zone.js": "^0.8.26"
	},
	"devDependencies": {
		"babel-traverse": "6.4.5",
		"babel-types": "6.4.5",
		"babylon": "6.4.5",
		"lazy": "1.0.11",
		"nativescript-dev-typescript": "~0.7.0",
		"typescript": "~2.7.2"
	}
}

And my app.gradle file:

dependencies {
  implementation 'com.android.support:multidex:1.0.3'
}

android {
  compileSdkVersion 27
  defaultConfig {  
    generatedDensities = []
    applicationId = "org.nativescript.test"
    multiDexEnabled true
  }  
  aaptOptions {  
    additionalParameters "--no-version-vectors"  
  }
  project.ext {
    googlePlayServicesVersion = "15.0.0"
  }
  dexOptions {
    javaMaxHeapSize "4g"
  }
}

I've been fiddling with the multidex issue for a while now. Any ideas? I should note that if I include one or the other in the package.json (not both), the build succeeds, and this only happens on release builds -- debug works fine.

My local images are removed during build after installing this plugin

after installing nativescript-lottie all images in ~/assets/images are not loaded
i presume it's because all images inside that folder are removed during build phase
but i don't know why

setMinAndMaxProgress undefined

Is there a way to get the animation to pause half way? I tried to set the min and max progress but I get "setMinAndMaxProgress is undefined":

this.iconHamburger.setMinAndMaxProgress(0, 50); // iconHamburger is a LottieView
this.iconHamburger.playAnimation();

Also there was no startAnimation, only playAnimation, at least with Angular (readme needs slight updating).

Thanks!

NativeScript 7 Support

Not visible on app build for production

I have a problem on iOS 13.5 with lottie plugin when app is compiled for production.

In development environment (tns debug ios) is working fine but when is compiled for production (tns build ios --release --for-device --env.production --env.sourceMap --env.uglify) the lottie is not rendered anymore. Maybe is a webpack issue.

My package.json

{
  "description": "My app",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "nativescript": {
    "id": "com.myapp.app",
    "tns-android": {
      "version": "6.5.1"
    },
    "tns-ios": {
      "version": "6.5.1"
    }
  },
  "scripts": {
    "start:android": "tns debug android"
  },
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/http": "~7.2.16",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@mapbox/polyline": "^1.1.1",
    "@nstudio/nativescript-checkbox": "^1.0.0",
    "@nstudio/nativescript-loading-indicator": "^3.0.4",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "nativescript-angular": "^8.21.0",
    "nativescript-app-tour": "^2.0.2",
    "nativescript-appversion": "^1.4.4",
    "nativescript-audio": "^5.0.5",
    "nativescript-background-http": "^4.2.1",
    "nativescript-bitmap-factory": "^1.8.1",
    "nativescript-brightness": "^1.0.1",
    "nativescript-directions": "^1.4.0",
    "nativescript-email": "^1.5.5",
    "nativescript-geolocation": "^5.1.0",
    "nativescript-google-maps-sdk": "^2.9.1",
    "nativescript-google-maps-utils": "^0.1.3",
    "nativescript-insomnia": "^1.2.3",
    "nativescript-iqkeyboardmanager": "^1.5.1",
    "nativescript-letter-avatar": "^0.3.0",
    "nativescript-local-notifications": "^4.2.1",
    "nativescript-localize": "^4.2.1",
    "nativescript-lottie": "^4.0.1",
    "nativescript-mediafilepicker": "^3.0.1",
    "nativescript-ng-ripple": "^2.0.1",
    "nativescript-permissions": "^1.3.9",
    "nativescript-phone": "^2.0.0",
    "nativescript-plugin-firebase": "^10.5.2",
    "nativescript-rater": "^2.1.2",
    "nativescript-socket.io": "^0.11.1",
    "nativescript-star-ratings": "^1.0.0",
    "nativescript-stripe": "^6.6.2",
    "nativescript-theme-core": "^1.0.6",
    "nativescript-toasty": "^3.0.0-alpha.2",
    "nativescript-ui-listview": "^8.2.0",
    "nativescript-ui-sidedrawer": "^8.0.1",
    "nativescript-vector-icons": "^1.0.0",
    "nativescript-vibrate": "^3.0.0",
    "nativescript-windowed-modal": "^6.2.1",
    "ngx-moment": "^3.5.0",
    "ngx-pipes": "^2.7.3",
    "omit-deep": "^0.3.0",
    "reflect-metadata": "~0.1.12",
    "rxjs": "~6.5.5",
    "tns-core-modules": "^6.5.2",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~8.2.14",
    "@ngtools/webpack": "~8.3.26",
    "@types/mapbox__polyline": "^1.0.0",
    "codelyzer": "~5.2.2",
    "nativescript-dev-webpack": "~1.5.1",
    "ng-openapi-gen": "^0.12.1",
    "node-sass": "~4.14.1",
    "timeline-view": "0.0.6",
    "tns-platform-declarations": "^6.5.2",
    "tslint": "~6.1.2",
    "typescript": "~3.5.3"
  }
}

Demo broken on Android

I'm not able to run the demo on Android only; the following output is produced:

npm run demo.android

> [email protected] demo.android /Users/colin/Development/nativescript/nativescript-lottie/src
> npm run preparedemo && cd ../demo && tns run android --syncAllFiles


> [email protected] preparedemo /Users/colin/Development/nativescript/nativescript-lottie/src
> npm run build && cd ../demo && tns plugin remove nativescript-lottie && tns plugin add ../src && tns install


> [email protected] build /Users/colin/Development/nativescript/nativescript-lottie/src
> npm i && tsc && npm run build.native


> [email protected] install /Users/colin/Development/nativescript/nativescript-lottie/src/node_modules/husky
> node husky install

husky > setting up git hooks
husky > done
added 311 packages from 175 contributors and audited 1347 packages in 7.088s
found 0 vulnerabilities


> [email protected] build.native /Users/colin/Development/nativescript/nativescript-lottie/src
> node scripts/build-native.js

executing 'tns plugin build'

> [email protected] prepack /Users/colin/Development/nativescript/nativescript-lottie/src
> npm run build.native


> [email protected] build.native /Users/colin/Development/nativescript/nativescript-lottie/src
> node scripts/build-native.js

executing 'tns plugin build'
npm WARN The package tns-core-modules is included as both a dev and production dependency.

npm ERR! path /Users/colin/Development/nativescript/nativescript-lottie/demo/node_modules/.staging/nativescript-lottie-fa1ef286/node_modules/@samverschueren/stream-to-observable
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename '/Users/colin/Development/nativescript/nativescript-lottie/demo/node_modules/.staging/nativescript-lottie-fa1ef286/node_modules/@samverschueren/stream-to-observable' -> '/Users/colin/Development/nativescript/nativescript-lottie/demo/node_modules/.staging/@samverschueren/stream-to-observable-34b85d38'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/colin/.npm/_logs/2018-12-17T04_30_55_014Z-debug.log
Successfully removed plugin nativescript-lottie
npm WARN The package tns-core-modules is included as both a dev and production dependency.

+ [email protected]
added 1 package from 5 contributors and audited 123 packages in 1.734s
found 4 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
Successfully installed plugin nativescript-lottie.
Copying template files...
Platform ios successfully added. v4.0.1
Copying template files...
⠋ No manifest found in /Users/colin/Development/nativescript/nativescript-lottie/demo/app/App_Resources/Android/AndroidManifest.xml
Platform android successfully added. v4.0.1
Searching for devices...
Executing before-watchPatterns hook from /Users/colin/Development/nativescript/nativescript-lottie/demo/hooks/before-watchPatterns/nativescript-dev-typescript.js
Executing before-watch hook from /Users/colin/Development/nativescript/nativescript-lottie/demo/hooks/before-watch/nativescript-dev-typescript.js
Found peer TypeScript 2.9.2
Executing before-prepare hook from /Users/colin/Development/nativescript/nativescript-lottie/demo/hooks/before-prepare/nativescript-dev-android-snapshot.js
Executing before-prepare hook from /Users/colin/Development/nativescript/nativescript-lottie/demo/hooks/before-prepare/nativescript-dev-typescript.js
Hook skipped because either bundling or livesync is in progress.
Preparing project...
No manifest found in /Users/colin/Development/nativescript/nativescript-lottie/demo/app/App_Resources/Android/AndroidManifest.xml
Successfully prepared plugin nativescript-lottie for android.
Successfully prepared plugin nativescript-theme-core for android.
Successfully prepared plugin tns-core-modules for android.
Successfully prepared plugin tns-core-modules-widgets for android.
Project successfully prepared (Android)
Executing after-prepare hook from /Users/colin/Development/nativescript/nativescript-lottie/demo/hooks/after-prepare/nativescript-dev-android-snapshot.js
Building project...
Gradle build...
         + applying user-defined configuration from /Users/colin/Development/nativescript/nativescript-lottie/demo/app/App_Resources/Android/app.gradle
Configuration 'compile' in project ':app' is deprecated. Use 'implementation' instead.
Configuration 'debugCompile' in project ':app' is deprecated. Use 'debugImplementation' instead.
         + adding nativescript runtime package dependency: nativescript-optimized
         + adding jar plugin dependency: /Users/colin/Development/nativescript/nativescript-lottie/src/platforms/android/LottieHelper.jar
         + adding aar plugin dependency: /Users/colin/Development/nativescript/nativescript-lottie/demo/node_modules/tns-core-modules-widgets/platforms/android/widgets-release.aar
/Users/colin/Development/nativescript/nativescript-lottie/demo/platforms/android/app/build/intermediates/manifests/full/debug/AndroidManifest.xml:19: AAPT: error: resource drawable/icon (aka org.nativescript.demo:drawable/icon) not found.

/Users/colin/Development/nativescript/nativescript-lottie/demo/platforms/android/app/build/intermediates/manifests/full/debug/AndroidManifest.xml:19: error: resource drawable/icon (aka org.nativescript.demo:drawable/icon) not found.
error: failed processing manifest.

Failed to execute aapt
com.android.ide.common.process.ProcessException: Failed to execute aapt
        at com.android.builder.core.AndroidBuilder.processResources(AndroidBuilder.java:796)
        at com.android.build.gradle.tasks.ProcessAndroidResources.invokeAaptForSplit(ProcessAndroidResources.java:551)
        at com.android.build.gradle.tasks.ProcessAndroidResources.doFullTaskAction(ProcessAndroidResources.java:285)
        at com.android.build.gradle.internal.tasks.IncrementalTask.taskAction(IncrementalTask.java:109)
        at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
        at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
        at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
        at java.lang.reflect.Method.invoke(Method.java:498)
        at org.gradle.internal.reflect.JavaMethod.invoke(JavaMethod.java:73)
        at org.gradle.api.internal.project.taskfactory.DefaultTaskClassInfoStore$IncrementalTaskAction.doExecute(DefaultTaskClassInfoStore.java:173)
        at org.gradle.api.internal.project.taskfactory.DefaultTaskClassInfoStore$StandardTaskAction.execute(DefaultTaskClassInfoStore.java:134)
        at org.gradle.api.internal.project.taskfactory.DefaultTaskClassInfoStore$StandardTaskAction.execute(DefaultTaskClassInfoStore.java:121)
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter$1.run(ExecuteActionsTaskExecuter.java:122)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:336)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:328)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor.execute(DefaultBuildOperationExecutor.java:197)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor.run(DefaultBuildOperationExecutor.java:107)
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeAction(ExecuteActionsTaskExecuter.java:111)
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeActions(ExecuteActionsTaskExecuter.java:92)
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.execute(ExecuteActionsTaskExecuter.java:70)
        at org.gradle.api.internal.tasks.execution.SkipUpToDateTaskExecuter.execute(SkipUpToDateTaskExecuter.java:63)
        at org.gradle.api.internal.tasks.execution.ResolveTaskOutputCachingStateExecuter.execute(ResolveTaskOutputCachingStateExecuter.java:54)
        at org.gradle.api.internal.tasks.execution.ValidatingTaskExecuter.execute(ValidatingTaskExecuter.java:58)
        at org.gradle.api.internal.tasks.execution.SkipEmptySourceFilesTaskExecuter.execute(SkipEmptySourceFilesTaskExecuter.java:88)
        at org.gradle.api.internal.tasks.execution.ResolveTaskArtifactStateTaskExecuter.execute(ResolveTaskArtifactStateTaskExecuter.java:52)
        at org.gradle.api.internal.tasks.execution.SkipTaskWithNoActionsExecuter.execute(SkipTaskWithNoActionsExecuter.java:52)
        at org.gradle.api.internal.tasks.execution.SkipOnlyIfTaskExecuter.execute(SkipOnlyIfTaskExecuter.java:54)
        at org.gradle.api.internal.tasks.execution.ExecuteAtMostOnceTaskExecuter.execute(ExecuteAtMostOnceTaskExecuter.java:43)
        at org.gradle.api.internal.tasks.execution.CatchExceptionTaskExecuter.execute(CatchExceptionTaskExecuter.java:34)
        at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter$EventFiringTaskWorker$1.run(DefaultTaskGraphExecuter.java:248)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:336)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:328)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor.execute(DefaultBuildOperationExecutor.java:197)
        at org.gradle.internal.progress.DefaultBuildOperationExecutor.run(DefaultBuildOperationExecutor.java:107)
        at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter$EventFiringTaskWorker.execute(DefaultTaskGraphExecuter.java:241)
        at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter$EventFiringTaskWorker.execute(DefaultTaskGraphExecuter.java:230)
        at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker.processTask(DefaultTaskPlanExecutor.java:124)
        at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker.access$200(DefaultTaskPlanExecutor.java:80)
        at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker$1.execute(DefaultTaskPlanExecutor.java:105)
        at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker$1.execute(DefaultTaskPlanExecutor.java:99)
        at org.gradle.execution.taskgraph.DefaultTaskExecutionPlan.execute(DefaultTaskExecutionPlan.java:625)
        at org.gradle.execution.taskgraph.DefaultTaskExecutionPlan.executeWithTask(DefaultTaskExecutionPlan.java:580)
        at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker.run(DefaultTaskPlanExecutor.java:99)
        at org.gradle.internal.concurrent.ExecutorPolicy$CatchAndRecordFailures.onExecute(ExecutorPolicy.java:63)
        at org.gradle.internal.concurrent.ManagedExecutorImpl$1.run(ManagedExecutorImpl.java:46)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
        at org.gradle.internal.concurrent.ThreadFactoryImpl$ManagedThreadRunnable.run(ThreadFactoryImpl.java:55)
        at java.lang.Thread.run(Thread.java:745)
Caused by: java.util.concurrent.ExecutionException: java.util.concurrent.ExecutionException: com.android.tools.aapt2.Aapt2Exception: AAPT2 error: check logs for details
        at com.google.common.util.concurrent.AbstractFuture.getDoneValue(AbstractFuture.java:503)
        at com.google.common.util.concurrent.AbstractFuture.get(AbstractFuture.java:482)
        at com.google.common.util.concurrent.AbstractFuture$TrustedFuture.get(AbstractFuture.java:79)
        at com.android.builder.core.AndroidBuilder.processResources(AndroidBuilder.java:794)
        ... 48 more
Caused by: java.util.concurrent.ExecutionException: com.android.tools.aapt2.Aapt2Exception: AAPT2 error: check logs for details
        at com.google.common.util.concurrent.AbstractFuture.getDoneValue(AbstractFuture.java:503)
        at com.google.common.util.concurrent.AbstractFuture.get(AbstractFuture.java:462)
        at com.google.common.util.concurrent.AbstractFuture$TrustedFuture.get(AbstractFuture.java:79)
        at com.android.builder.internal.aapt.v2.QueueableAapt2.lambda$makeValidatedPackage$1(QueueableAapt2.java:179)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
        ... 1 more
Caused by: com.android.tools.aapt2.Aapt2Exception: AAPT2 error: check logs for details
        at com.android.builder.png.AaptProcess$NotifierProcessOutput.handleOutput(AaptProcess.java:463)
        at com.android.builder.png.AaptProcess$NotifierProcessOutput.err(AaptProcess.java:415)
        at com.android.builder.png.AaptProcess$ProcessOutputFacade.err(AaptProcess.java:332)
        at com.android.utils.GrabProcessOutput$1.run(GrabProcessOutput.java:104)

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processDebugResources'.
> Failed to execute aapt

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

* Get more help at https://help.gradle.org

BUILD FAILED in 20s

I noticed **/App_Resources/ is included in the gitignore. If I copy the missing files across from demo-ng then it builds, but gets a runtime error as follows;

npm run demo.android

> [email protected] demo.android /Users/colin/Development/nativescript/nativescript-lottie/src
> npm run preparedemo && cd ../demo && tns run android --syncAllFiles


> [email protected] preparedemo /Users/colin/Development/nativescript/nativescript-lottie/src
> npm run build && cd ../demo && tns plugin remove nativescript-lottie && tns plugin add ../src && tns install


> [email protected] build /Users/colin/Development/nativescript/nativescript-lottie/src
> npm i && tsc && npm run build.native

audited 1347 packages in 3.381s
found 0 vulnerabilities


> [email protected] build.native /Users/colin/Development/nativescript/nativescript-lottie/src
> node scripts/build-native.js

executing 'tns plugin build'
Successfully removed plugin nativescript-lottie for ios.
Successfully removed plugin nativescript-lottie for android.
npm WARN The package tns-core-modules is included as both a dev and production dependency.

+ [email protected]
added 1 package from 5 contributors and audited 123 packages in 1.96s
found 4 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
Successfully installed plugin nativescript-lottie.
Copying template files...
Platform ios successfully added. v4.0.1
Copying template files...
Platform android successfully added. v4.0.1
Searching for devices...
Executing before-watchPatterns hook from /Users/colin/Development/nativescript/nativescript-lottie/demo/hooks/before-watchPatterns/nativescript-dev-typescript.js
Executing before-watch hook from /Users/colin/Development/nativescript/nativescript-lottie/demo/hooks/before-watch/nativescript-dev-typescript.js
Found peer TypeScript 2.9.2
Executing before-prepare hook from /Users/colin/Development/nativescript/nativescript-lottie/demo/hooks/before-prepare/nativescript-dev-android-snapshot.js
Executing before-prepare hook from /Users/colin/Development/nativescript/nativescript-lottie/demo/hooks/before-prepare/nativescript-dev-typescript.js
Hook skipped because either bundling or livesync is in progress.
Preparing project...
Successfully prepared plugin nativescript-lottie for android.
Successfully prepared plugin nativescript-theme-core for android.
Successfully prepared plugin tns-core-modules for android.
Successfully prepared plugin tns-core-modules-widgets for android.
Project successfully prepared (Android)
Executing after-prepare hook from /Users/colin/Development/nativescript/nativescript-lottie/demo/hooks/after-prepare/nativescript-dev-android-snapshot.js
Building project...
Gradle build...
         + applying user-defined configuration from /Users/colin/Development/nativescript/nativescript-lottie/demo/app/App_Resources/Android/app.gradle
Configuration 'compile' in project ':app' is deprecated. Use 'implementation' instead.
Configuration 'debugCompile' in project ':app' is deprecated. Use 'debugImplementation' instead.
         + adding nativescript runtime package dependency: nativescript-optimized
         + adding jar plugin dependency: /Users/colin/Development/nativescript/nativescript-lottie/src/platforms/android/LottieHelper.jar
         + adding aar plugin dependency: /Users/colin/Development/nativescript/nativescript-lottie/demo/node_modules/tns-core-modules-widgets/platforms/android/widgets-release.aar
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
Project successfully built.
Installing on device emulator-5554...
Successfully installed on device with identifier 'emulator-5554'.
Refreshing application on device emulator-5554...
Successfully synced application org.nativescript.demo on device emulator-5554.
12-17 17:24:57.300  5181  5181 E AndroidRuntime:     com.tns.Runtime.callJSMethodNative(Native Method)
12-17 17:24:57.300  5181  5181 E AndroidRuntime:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
12-17 17:24:57.300  5181  5181 E AndroidRuntime:     com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
12-17 17:24:57.300  5181  5181 E AndroidRuntime:     com.tns.Runtime.callJSMethod(Runtime.java:957)
12-17 17:24:57.300  5181  5181 E AndroidRuntime:     com.tns.Runtime.callJSMethod(Runtime.java:941)
12-17 17:24:57.300  5181  5181 E AndroidRuntime:     com.tns.Runtime.callJSMethod(Runtime.java:933)
12-17 17:24:57.303  5181  5181 E AndroidRuntime: 	at com.tns.Runtime.callJSMethodNative(Native Method)
12-17 17:24:57.303  5181  5181 E AndroidRuntime: 	at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
12-17 17:24:57.303  5181  5181 E AndroidRuntime: 	at com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
12-17 17:24:57.303  5181  5181 E AndroidRuntime: 	at com.tns.Runtime.callJSMethod(Runtime.java:957)
12-17 17:24:57.303  5181  5181 E AndroidRuntime: 	at com.tns.Runtime.callJSMethod(Runtime.java:941)
12-17 17:24:57.303  5181  5181 E AndroidRuntime: 	at com.tns.Runtime.callJSMethod(Runtime.java:933)
System.err: com.tns.NativeScriptException:
System.err: Calling js method onCreateView failed
System.err:
System.err: Error: java.lang.IllegalStateException: Unable to parse composition
System.err:     com.airbnb.lottie.LottieAnimationView$2.onResult(LottieAnimationView.java:77)
System.err:     com.airbnb.lottie.LottieAnimationView$2.onResult(LottieAnimationView.java:75)
System.err:     com.airbnb.lottie.LottieTask.addFailureListener(LottieTask.java:115)
System.err:     com.airbnb.lottie.LottieAnimationView.setAnimation(LottieAnimationView.java:403)
System.err:     com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
System.err:     com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:957)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:941)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:933)
System.err:     com.tns.FragmentClass.onCreateView(FragmentClass.java:40)
System.err:     android.app.Fragment.performCreateView(Fragment.java:2522)
System.err:     android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1298)
System.err:     android.app.FragmentManagerImpl.addAddedFragments(FragmentManager.java:2426)
System.err:     android.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2205)
System.err:     android.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2161)
System.err:     android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2062)
System.err:     android.app.FragmentManagerImpl$1.run(FragmentManager.java:738)
System.err:     android.os.Handler.handleCallback(Handler.java:873)
System.err:     android.os.Handler.dispatchMessage(Handler.java:99)
System.err:     android.os.Looper.loop(Looper.java:193)
System.err:     android.app.ActivityThread.main(ActivityThread.java:6669)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: Caused by: java.io.FileNotFoundException: Mobilo/B.json
System.err:     android.content.res.AssetManager.nativeOpenAsset(Native Method)
System.err:     android.content.res.AssetManager.open(AssetManager.java:744)
System.err:     android.content.res.AssetManager.open(AssetManager.java:721)
System.err:     com.airbnb.lottie.LottieCompositionFactory.fromAssetSync(LottieCompositionFactory.java:98)
System.err:     com.airbnb.lottie.LottieCompositionFactory$1.call(LottieCompositionFactory.java:79)
System.err:     com.airbnb.lottie.LottieCompositionFactory$1.call(LottieCompositionFactory.java:77)
System.err:     java.util.concurrent.FutureTask.run(FutureTask.java:266)
System.err:     java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
System.err:     java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
System.err:     java.lang.Thread.run(Thread.java:764)
System.err: File: "file:///data/data/org.nativescript.demo/files/app/tns_modules/nativescript-lottie/nativescript-lottie.js, line: 63, column: 28
System.err:
System.err: StackTrace:
System.err: 	Frame: function:'LottieView.setSrc', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/nativescript-lottie/nativescript-lottie.js', line: 63, column: 29
System.err: 	Frame: function:'LottieView.(anonymous function)', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/nativescript-lottie/nativescript-lottie.js', line: 56, column: 14
System.err: 	Frame: function:'applyAllNativeSetters', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 960, column: 28
System.err: 	Frame: function:'initNativeView', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 904, column: 9
System.err: 	Frame: function:'ViewBase.onResumeNativeUpdates', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 627, column: 22
System.err: 	Frame: function:'ViewBase._resumeNativeUpdates', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 272, column: 18
System.err: 	Frame: function:'ViewBase.onLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 231, column: 14
System.err: 	Frame: function:'View.onLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 213, column: 35
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 90
System.err: 	Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 304, column: 9
System.err: 	Frame: function:'ViewBase.callLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 14
System.err: 	Frame: function:'ViewBase.loadView', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 439, column: 18
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 233, column: 19
System.err: 	Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js', line: 125, column: 26
System.err: 	Frame: function:'ViewCommon.eachChild', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 868, column: 14
System.err: 	Frame: function:'ViewBase.onLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 232, column: 14
System.err: 	Frame: function:'View.onLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 213, column: 35
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 90
System.err: 	Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 304, column: 9
System.err: 	Frame: function:'ViewBase.callLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 14
System.err: 	Frame: function:'ViewBase.loadView', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 439, column: 18
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 233, column: 19
System.err: 	Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js', line: 125, column: 26
System.err: 	Frame: function:'ViewCommon.eachChild', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 868, column: 14
System.err: 	Frame: function:'ViewBase.onLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 232, column: 14
System.err: 	Frame: function:'View.onLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 213, column: 35
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 90
System.err: 	Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 304, column: 9
System.err: 	Frame: function:'ViewBase.callLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 14
System.err: 	Frame: function:'ViewBase.loadView', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 439, column: 18
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 233, column: 19
System.err: 	Frame: function:'ContentView.eachChildView', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/content-view/content-view.js', line: 70, column: 13
System.err: 	Frame: function:'ViewCommon.eachChild', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 868, column: 14
System.err: 	Frame: function:'ViewBase.onLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 232, column: 14
System.err: 	Frame: function:'View.onLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 213, column: 35
System.err: 	Frame: function:'ScrollViewBase.onLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/scroll-view/scroll-view-common.js', line: 31, column: 35
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 90
System.err: 	Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 304, column: 9
System.err: 	Frame: function:'ViewBase.callLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 14
System.err: 	Frame: function:'ViewBase.loadView', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 439, column: 18
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 233, column: 19
System.err: 	Frame: function:'ContentView.eachChildView', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/content-view/content-view.js', line: 70, column: 13
System.err: 	Frame: function:'PageBase.eachChildView', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/page/page-common.js', line: 120, column: 40
System.err: 	Frame: function:'ViewCommon.eachChild', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 868, column: 14
System.err: 	Frame: function:'ViewBase.onLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 232, column: 14
System.err: 	Frame: function:'View.onLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 213, column: 35
System.err: 	Frame: function:'Page.onLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/page/page.js', line: 43, column: 35
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 90
System.err: 	Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 304, column: 9
System.err: 	Frame: function:'ViewBase.callLoaded', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 14
System.err: 	Frame: function:'ViewBase.loadView', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 439, column: 18
System.err: 	Frame: function:'ViewBase._addViewCore', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 434, column: 18
System.err: 	Frame: function:'ViewBase._addView', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 420, column: 14
System.err: 	Frame: function:'FragmentCallbacksImplementation.onCreateView', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 602, column: 19
System.err: 	Frame: function:'FragmentClass.onCreateView', file:'file:///data/data/org.nativescript.demo/files/app/tns_modules/tns-core-modules/ui/frame/fragment.js', line: 27, column: 38
System.err:
System.err: 	at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: 	at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
System.err: 	at com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
System.err: 	at com.tns.Runtime.callJSMethod(Runtime.java:957)
System.err: 	at com.tns.Runtime.callJSMethod(Runtime.java:941)
System.err: 	at com.tns.Runtime.callJSMethod(Runtime.java:933)
System.err: 	at com.tns.FragmentClass.onCreateView(FragmentClass.java:40)
System.err: 	at android.app.Fragment.performCreateView(Fragment.java:2522)
System.err: 	at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1298)
System.err: 	at android.app.FragmentManagerImpl.addAddedFragments(FragmentManager.java:2426)
System.err: 	at android.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2205)
System.err: 	at android.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2161)
System.err: 	at android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2062)
System.err: 	at android.app.FragmentManagerImpl$1.run(FragmentManager.java:738)
System.err: 	at android.os.Handler.handleCallback(Handler.java:873)
System.err: 	at android.os.Handler.dispatchMessage(Handler.java:99)
System.err: 	at android.os.Looper.loop(Looper.java:193)
System.err: 	at android.app.ActivityThread.main(ActivityThread.java:6669)
System.err: 	at java.lang.reflect.Method.invoke(Native Method)
System.err: 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: Caused by: java.lang.IllegalStateException: Unable to parse composition
System.err: 	at com.airbnb.lottie.LottieAnimationView$2.onResult(LottieAnimationView.java:77)
System.err: 	at com.airbnb.lottie.LottieAnimationView$2.onResult(LottieAnimationView.java:75)
System.err: 	at com.airbnb.lottie.LottieTask.addFailureListener(LottieTask.java:115)
System.err: 	at com.airbnb.lottie.LottieAnimationView.setAnimation(LottieAnimationView.java:403)
System.err: 	... 21 more
System.err: Caused by: java.io.FileNotFoundException: Mobilo/B.json
System.err: 	at android.content.res.AssetManager.nativeOpenAsset(Native Method)
System.err: 	at android.content.res.AssetManager.open(AssetManager.java:744)
System.err: 	at android.content.res.AssetManager.open(AssetManager.java:721)
System.err: 	at com.airbnb.lottie.LottieCompositionFactory.fromAssetSync(LottieCompositionFactory.java:98)
System.err: 	at com.airbnb.lottie.LottieCompositionFactory$1.call(LottieCompositionFactory.java:79)
System.err: 	at com.airbnb.lottie.LottieCompositionFactory$1.call(LottieCompositionFactory.java:77)
System.err: 	at java.util.concurrent.FutureTask.run(FutureTask.java:266)
System.err: 	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
System.err: 	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
System.err: 	at java.lang.Thread.run(Thread.java:764)

Any help would be greatly appreciated, thanks.

How to use setColorValueDelegateForKeyPath

Hi everyone,

How do I use setColorValueDelegateForKeyPath? I have this file https://edit.lottiefiles.com/?src=https%3A%2F%2Fassets7.lottiefiles.com%2Fpackages%2Flf20_OX0Ts3.json that I would like to change the text color to white, is possible? and is that method the right one? Any suggestions as to how to achieve it?

iOS: setAnimationProgress() is not a function in progress setter

According to https://github.com/airbnb/lottie-ios/blob/b0ddddac01347b593b11c5e6be8778e2e801e607/lottie-ios/Classes/PublicHeaders/LOTAnimationView.h#L51 there is no setAnimationProgress() on the LOTAnimationView.

The property can be set the same way it is read.

nativescript-dev-assets conflicts with NativeScript 4.0 project layout

Dev devDependency nativescript-dev-assets is not needed for a NativeScript 4.0 project structure. Actually, it makes the build break.

Starting with NS 4.0, we can have a real Android project structure below App_Resources/Android (NativeScript/nativescript-cli#3347). After running tns resources update there is an assets folder in which lottie animations can be placed.

However, using nativescript-lottie will install nativescript-dev-assets which does not work with the new layout.

We worked around it by forcibly removing the prepare hook of nativescript-dev-assets prior building.

Could you please create a NS 4.0 compatible version of nativescript-lottie which does not have the nativescript-dev-assets devDependency?

Can't run app for iOS

I can't run my own integration of Lottie for iOS, and since can reproduce the error I get on my own work when I run the demo app, I figure there's something wrong:

1   0x1059ad7cb NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
2   0x1060821ee ffi_closure_unix64_inner
3   0x106082b22 ffi_closure_unix64
4   0x106db2e70 -[UIViewController view]
5   0x106c7c4b5 -[UIWindow addRootViewControllerViewIfPossible]
6   0x106c7cc06 -[UIWindow _setHidden:forced:]
7   0x106c90519 -[UIWindow makeKeyAndVisible]
8   0x10608297d ffi_call_unix64
9   0x121917cd0
file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:175:56: JS ERROR Error: Building UI from XML. @file:///app/main-page.xml:12:17
	 > Can't find variable: LAAnimationView
Feb 12 17:05:50 LOOPERMAC com.apple.CoreSimulator.SimDevice.1552CC18-C70B-4209-9F17-D04A886CD04C.launchd_sim[76258] (UIKitApplication:org.nativescript.demo[0xdba5][76815]): Service exited due to Segmentation fault: 11

Support for NativeScript-Vue

I have tried to register the component and use it in Single file component. I am not able to see anything. The Lottie JSON file is downloaded from LottieFiles.

iOS 13 not working

On android the animations render and play correct, on ios is render but not animated (I use autoplay).
I user angular and the latest version of nativescript.

Splash creen error

When used for splashscreen it lauches the app and then closes

i created a separate component for splash screen removed LaunchScreenTheme from AndroidManifest
then when the app loads it first goes to splashscreen after it plays fully should navigate to login route

<GridLayout>
    <LottieView width="100%" height="100%" src="~/assets/lottie/splashscreen.json" loop="false" autoPlay="true">
    </LottieView>
</GridLayout>

the app just opens and closes, can someone navigate me on how to do it properly if it is not bug of package

iOS won't render

Preamble
Runs exactly as expected in Android, as noted in issue #6

View.xml

<Page 
    xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:Lottie="nativescript-lottie">
    <StackLayout>
        <Lottie:LottieView 
            id="lottie" 
            android:src="app/assets/lightbulb.json" 
            ios:src="res://assets/lightbulb.json" 
            height="130" 
            loop="true" 
            loaded="lottieLoaded" 
            tap="lottieTapped">
        </Lottie:LottieView>
    </StackLayout>
</Page>

View.js
Originally I had it running (Android only) without any JS. But I've implemented this to get some feedback in the console.

const changeAnimationState = (lottie, isAnimating) => {
  if (isAnimating) {
    lottie.cancelAnimation();
    console.log("Lottie animation canceled.");
  } else {
    lottie.playAnimation();
    console.log("Lottie animation started.");
  }
};

exports.lottieLoaded = args => {
  try {
    const lottie = args.object.getViewById("lottie");
    const isAnimating = lottie.isAnimating();
    console.log("LottieView does exist!");
    console.log(`Is Lottie animating? ${isAnimating}`);
    changeAnimationState(lottie, isAnimating);
  } catch (error) {
    console.log("There was an error!");
    console.log(error);
  }
};

exports.lottieTapped = args => {
  try {
    const lottie = args.object.getViewById("lottie");
    const isAnimating = lottie.isAnimating();
    console.log("LottieView was tapped!");
    console.log(`Is Lottie animating? ${isAnimating}`);
    changeAnimationState(lottie, isAnimating);
  } catch (error) {
    console.log("There was an error!");
    console.log(error);
  }
};

Console output
Upon navigating to the page both Android and iOS produce the same console output. But only Android actually produces a visual rendering of the Lottie.

-> LottieView does exist!
-> Is Lottie animating? false
-> Lottie animation started.

-> LottieView was tapped!
-> Is Lottie animating? true
-> Lottie animation canceled.

I was thinking the Lottie:LottieView was rendering in iOS but the asset was not being fetched. Because of some bad path or whatever. But since playAnimation() and cancelAnimation() both work I'm thinking it's there, just not visible for some reason.

Note I'm using the LightBulb Lottie from the repos sample-effects directory.

---

• I've also used file-system to check that the src assets do exist.
• Annoyingly iOS doesn't output any error to console when you give src a nonsense path.
  • Which is why I started implementing JS.
• Tried adding visibility and width to Lottie:LottieView, no impact.
• Run in both emulators and real devices for both Android and iOS. Only ever works in Android.
• Yes other static assets are being rendered.
• I updated to NativeScript 3.4 the other day, but it wasn't working before that either.

---

Warnings

Note Besides the warnings and logs below, there was another warning as mentioned in issue #6 regarding a platform version not being assigned in Podfile. I added it to the node-modules Podfile, which doesn't feel like the right thing to do. But the warning is gone so...

After installing the plugin and running tns run ios I recieved the following warnings:

Xcode build...
/platforms/ios/Pods/lottie-ios/lottie-ios/Classes/Private/LOTAnimatedSwitch.m:152:19: warning: 
      'userInterfaceLayoutDirectionForSemanticContentAttribute:' is only available on iOS
      9.0 or newer [-Wunguarded-availability]
  ...userInterfaceLayoutDirectionForSemanticContentAttribute:self.semanticContentAttribute]...
     ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
In module 'UIKit' imported from /platforms/ios/Pods/Target Support Files/lottie-ios/lottie-ios-prefix.pch:2:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator11.2.sdk/System/Library/Frameworks/UIKit.framework/Headers/UIView.h:167:1: note: 
      'userInterfaceLayoutDirectionForSemanticContentAttribute:' has been explicitly
      marked partial here
+ (UIUserInterfaceLayoutDirection)userInterfaceLayoutDirectionForSemanticContentAt...
^
/platforms/ios/Pods/lottie-ios/lottie-ios/Classes/Private/LOTAnimatedSwitch.m:152:19: note: 
      enclose 'userInterfaceLayoutDirectionForSemanticContentAttribute:' in an @available
      check to silence this warning
  ...userInterfaceLayoutDirectionForSemanticContentAttribute:self.semanticContentAttribute]...
     ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/platforms/ios/Pods/lottie-ios/lottie-ios/Classes/Private/LOTAnimatedSwitch.m:152:80: warning: 
      'semanticContentAttribute' is only available on iOS 9.0 or newer
      [-Wunguarded-availability]
  ...semanticContentAttribute] == UIUserInterfaceLayoutDirectionRightToLeft) {
     ^~~~~~~~~~~~~~~~~~~~~~~~
In module 'UIKit' imported from /platforms/ios/Pods/Target Support Files/lottie-ios/lottie-ios-prefix.pch:2:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator11.2.sdk/System/Library/Frameworks/UIKit.framework/Headers/UIView.h:164:50: note: 
      'semanticContentAttribute' has been explicitly marked partial here
@property (nonatomic) UISemanticContentAttribute semanticContentAttribute NS_AVAIL...
                                                 ^
/platforms/ios/Pods/lottie-ios/lottie-ios/Classes/Private/LOTAnimatedSwitch.m:152:80: note: 
      enclose 'semanticContentAttribute' in an @available check to silence this warning
  ...semanticContentAttribute] == UIUserInterfaceLayoutDirectionRightToLeft) {
     ^~~~~~~~~~~~~~~~~~~~~~~~
2 warnings generated.
/platforms/ios/Pods/lottie-ios/lottie-ios/Classes/Private/LOTAnimatedSwitch.m:152:19: warning: 
      'userInterfaceLayoutDirectionForSemanticContentAttribute:' is only available on iOS
      9.0 or newer [-Wunguarded-availability]
  ...userInterfaceLayoutDirectionForSemanticContentAttribute:self.semanticContentAttribute]...
     ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
In module 'UIKit' imported from /platforms/ios/Pods/Target Support Files/lottie-ios/lottie-ios-prefix.pch:2:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator11.2.sdk/System/Library/Frameworks/UIKit.framework/Headers/UIView.h:167:1: note: 
      'userInterfaceLayoutDirectionForSemanticContentAttribute:' has been explicitly
      marked partial here
+ (UIUserInterfaceLayoutDirection)userInterfaceLayoutDirectionForSemanticContentAt...
^
/platforms/ios/Pods/lottie-ios/lottie-ios/Classes/Private/LOTAnimatedSwitch.m:152:19: note: 
      enclose 'userInterfaceLayoutDirectionForSemanticContentAttribute:' in an @available
      check to silence this warning
  ...userInterfaceLayoutDirectionForSemanticContentAttribute:self.semanticContentAttribute]...
     ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/platforms/ios/Pods/lottie-ios/lottie-ios/Classes/Private/LOTAnimatedSwitch.m:152:80: warning: 
      'semanticContentAttribute' is only available on iOS 9.0 or newer
      [-Wunguarded-availability]
  ...semanticContentAttribute] == UIUserInterfaceLayoutDirectionRightToLeft) {
     ^~~~~~~~~~~~~~~~~~~~~~~~
In module 'UIKit' imported from /platforms/ios/Pods/Target Support Files/lottie-ios/lottie-ios-prefix.pch:2:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator11.2.sdk/System/Library/Frameworks/UIKit.framework/Headers/UIView.h:164:50: note: 
      'semanticContentAttribute' has been explicitly marked partial here
@property (nonatomic) UISemanticContentAttribute semanticContentAttribute NS_AVAIL...
                                                 ^
/platforms/ios/Pods/lottie-ios/lottie-ios/Classes/Private/LOTAnimatedSwitch.m:152:80: note: 
      enclose 'semanticContentAttribute' in an @available check to silence this warning
  ...semanticContentAttribute] == UIUserInterfaceLayoutDirectionRightToLeft) {
     ^~~~~~~~~~~~~~~~~~~~~~~~
2 warnings generated.

And there are some logs which I was not getting until I made the Podfile change.

ld: warning: object file (/platforms/ios/build/emulator/Pods_SALLY.framework/Pods_SALLY(Pods-SALLY-dummy.o)) was built for newer iOS version (9.0) than being linked (8.0)

That's all I can think of to tell you ATM, Has anyone got this working in iOS ?

@NathanWalker

plugin not working with nativescript 3.0.0 over android device

Hi! I tried this plugin with nativescript 3.0.0 and it doesn't seem to work. No error message, just the 'lottie views' don't appear on the layout

I did the workaround of copying the animation jsons directly to the asset folder on android.

I made the same steps with a project based on nativescript 2.5.0 and worked perfectly.

Dynamic colors

Can't we have dynamic colors changes like this in android airbnb/lottie-android#504 , and this on ios airbnb/lottie-ios#236 , it would be a great feature to have . Thanks

iOS 14 renders but doesn't display

The plugin works renders well with any Android devices, on iOS is rendered but it doesn't not display. I tried with iOS emulator ios 12,13 and 14 (iPhone and iPAd) and also giving width and height.

Repo: https://github.com/cbun097/nativescript

Angular: 10
NativeScript: 7

Thanks!

Unexpected loop behaviour

When setting the loop property in xml it doesn't follow expected behaviour.

Outcome

• loop="true" and loop="false" both result in a looped animation.
• loop="" and loop not set, do NOT loop the animation. (i.e. acts as false)

Expected

• loop="false" to result in a non-looped animation.
• loop="true" to result in a looped animation.
• loop="" or loop not set, to be ignored resulting in the default non-looped animation.

---

Setting loop property in code-behind does produce expected results.

Full screen animation with isUserInteractionEnabled="false"

I'm trying to use lottie to show a full-screen success animation after a game successful. But animation blocks buttons below it, so it blocks UI. Setting isUserInteractionEnabled="false" helped on iOS but not on Android. As far as I learned, on Android, we need to set this property for every child of it. But, you know, in the implementation we don't have child elements for LottieView component.

Do you have any suggestion for this? Can we proxy this attributes to the children of LottieView component on library level?

Can't play dotlottie (.lottie) files

The nativescript-lottie couldn't play a .lottie file

iOS: unhandled promise rejection

When using with Angular binding the following uncaught rejection can happen (even though it's not a problem but can cause strange app behavior to follow):

CONSOLE ERROR file:///app/vendor.js:69564:30: Unhandled Promise rejection: The iOS lottie view isn't loaded yet. ; Zone: <root> ; Task: null ; Value: Error: The iOS lottie view isn't loaded yet. file:///app/vendor.js:71016:33 [<root>]
ZoneAwarePromise@file:///app/vendor.js:69790:37 [<root>]
playAnimation@file:///app/vendor.js:71009:27 [<root>]
file:///app/vendor.js:70980:35 [<root>]
applyAllNativeSetters@file:///app/vendor.js:99752:28 [<root>]
initNativeView@file:///app/vendor.js:99696:30 [<root>]
onResumeNativeUpdates@file:///app/vendor.js:100556:36 [<root>]
_resumeNativeUpdates@file:///app/vendor.js:100201:39 [<root>]
onLoaded@file:///app/vendor.js:100160:34 [<root>]
onLoaded@file:///app/vendor.js:70990:39 [<root>]
file:///app/vendor.js:100240:98 [<root>]
callFunctionWithSuper@file:///app/vendor.js:100233:13 [<root>]
callLoaded@file:///app/vendor.js:100240:35 [<root>]
loadView@file:///app/vendor.js:100368:28 [<root>]
file:///app/vendor.js:100162:27 [<root>]
eachChildView@file:///app/vendor.js:108943:34

PR coming to seamlessly handle and avoid this issue.

Angular Completion Block Not Working

My ts component:

import { Component, OnInit } from "@angular/core";

import { Item } from "./item";
import { ItemService } from "./item.service";
import { LottieView } from 'nativescript-lottie';
import { registerElement } from '@nativescript/angular';

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

@Component({
    selector: "ns-items",
    templateUrl: "./items.component.html",
    styleUrls: ['./items.component.css'],
    moduleId: module.id
})
export class ItemsComponent implements OnInit {
    items: Array<Item>;

    public loop: boolean = true;
    public src: string;
    public autoPlay: boolean = true;
    public animations: Array<string>;

    private _lottieView: LottieView;

    constructor(private itemService: ItemService) { }

    ngOnInit(): void {
        this.items = this.itemService.getItems();
    }

    lottieViewLoaded(event) {

        console.log('loaded! ')
        console.log({ event })

        this._lottieView = <LottieView>event.object;

        this._lottieView.playAnimation();
    }

    lottieViewCompleted(event) {
        console.log('completed! ')
        console.log({ event })
    }

    lottieViewFinished(event) {
        console.log('finished! ')
        console.log({ event })
    }
}

I have tried all these various attempts... the "loaded" function triggers, but the "completed" event never triggers...

<Lottie:LottieView src="res://animations/check-animation.json" height="350" loop="false" autoPlay="false" viewport="" scaleY=".8" scaleX=".8" (loaded)="lottieViewLoaded($event)" completed="lottieViewCompleted($event)"  />

<Lottie:LottieView src="res://animations/check-animation.json" height="350" loop="false" autoPlay="false" viewport="" scaleY=".8" scaleX=".8" (loaded)="lottieViewLoaded($event)" (completed)="lottieViewCompleted($event)"  />

<Lottie:LottieView src="res://animations/check-animation.json" height="350" loop="false" autoPlay="false" viewport="" scaleY=".8" scaleX=".8" (loaded)="lottieViewLoaded($event)" complete="lottieViewCompleted($event)"  />

<Lottie:LottieView src="res://animations/check-animation.json" height="350" loop="false" autoPlay="false" viewport="" scaleY=".8" scaleX=".8" (loaded)="lottieViewLoaded($event)" (complete)="lottieViewCompleted($event)"  />

<Lottie:LottieView src="res://animations/check-animation.json" height="350" loop="false" autoPlay="false" viewport="" scaleY=".8" scaleX=".8" (loaded)="lottieViewLoaded($event)" completionBlock="lottieViewCompleted($event)"  />

<Lottie:LottieView src="res://animations/check-animation.json" height="350" loop="false" autoPlay="false" viewport="" scaleY=".8" scaleX=".8" (loaded)="lottieViewLoaded($event)" (completionBlock)="lottieViewCompleted($event)"  />

None of these work for me...

what's the right way to do this? Can we please add it to the README

Inconsistent behaviour across iPhone models and Android

I'm using NativeScript 3x and It seems impossible to get consistent results with this library.
I've made a small example to ilustrate it.

<StackLayout  backgroundColor="lightgray">
    <Lottie:LottieView src="A.json"  loop="true" autoPlay="true"/>
</StackLayout>

And this is the result:

I ended up with diferent layouts for Android an iOS, and tweaking css properties for each iPhone family.
Trying to get a simple full screen animation working in every device is frustrating and time consuming with a lot of trial and error to tweak values.

Type 'typeof LottieView' is not assignable to type 'ViewClass'.

Nativescript Angular, fresh install, trying to use Lottie in a component:

{
  "name": "Test app",
  "license": "SEE LICENSE IN <your-license-filename>",
  "version": "0.0.1",
  "nativescript": {
    "id": "io.testapp.app",
    "tns-android": {
      "version": "6.1.2"
    },
    "tns-ios": {
      "version": "6.1.1"
    }
  },
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/http": "~8.0.0-beta.10",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "@nstudio/nativescript-cardview": "^1.0.0",
    "@nstudio/nativescript-loading-indicator": "^1.0.0",
    "libphonenumber-js": "^1.7.11",
    "nativescript-angular": "~8.2.0",
    "nativescript-lottie": "^5.0.1",
    "nativescript-ngx-shadow": "^6.4.0",
    "nativescript-pager": "^9.3.14",
    "nativescript-taptic-engine": "^2.1.0",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.12",
    "rxjs": "~6.5.0",
    "rxjs-compat": "^6.5.2",
    "tns-core-modules": "~6.1.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/core": "~8.2.0",
    "@angular/cli": "~8.0.3",
    "@angular/compiler-cli": "~8.2.0",
    "@nativescript/schematics": "~0.7.0",
    "@ngtools/webpack": "~8.0.3",
    "nativescript-dev-webpack": "~1.2.0",
    "node-sass": "^4.7.1",
    "typescript": "~3.5.3"
  }
}

In my component.ts:

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

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

@Component({
  selector: 'ns-app-loader',
  templateUrl: './app-loader.component.html',
  styleUrls: ['./app-loader.component.scss'],
  moduleId: module.id,
})
export class AppLoaderComponent implements OnInit {

  @Input() backgroundColor;
  @Input() spinnerColor;
  @Input() size;

  public loop: boolean = true;
  public src: string;
  public autoPlay: boolean = true;
  public animations: Array<string>;

  private _lottieView: LottieView;

  constructor() {
    this.animations = [
      'images/loaders/main-gradient-loader.json',
    ];
    this.src = this.animations[0];
  }

  ngOnInit() {
    //
  }

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

}

Animation renders differently on mobile vs. web

Not sure if this an issue of nativescript-lottie or something in the underlying native implementations. If so, let me know and I'll open issues there.

When previewing a custom lottie animation on the web (using https://lottiefiles.com/preview) the animation renders correctly. When running it with nativescript-lottie it gets rendered with an opaque background. Happens both on Android and iOS.

Looks like this (left side: iOS, right side: web)

json file attached here inside the ZIP
animation.zip