Using Lottie with nativescript-vue

README.md

Using Lottie with NativeScript-Vue

Install Lottie

tns plugin add nativescript-lottie

Register element

In your app.js

Vue.registerElement('lottie-view', () => require('nativescript-lottie').LottieView)

use Element

template: `
  <Page>
    <StackLayout>
      <LottieView src="pinjump.json" height="130" loop="true" autoplay="true"/>
    </StackLayout>
  </Page>
`

Notice (https://github.com/bradmartin/nativescript-lottie#notice)

There is a current issue open on the NativeScript Android runtime repo here to determine the correct approach on placing the files in assets for the native library to find the file using Android's getAssets() method. There are ways to hack around this but right now I don't have the time, so you have to run a build and then move your animation .json files into platforms/android/src/main/assets for this to work. Then you can execute tns run android and the files will transfer to your device/emulator. Hopefully a solution comes along soon without this approach as it's not the simplest for beginner NativeScript devs without much Android knowledge. There are some sample animation files in the sample-effects folder taken from the Airbnb repo.

app.js

const Vue = require('nativescript-vue')

Vue.registerElement('lottie-view', () => require('nativescript-lottie').LottieView)

new Vue({
  template: `
    <Page>
      <StackLayout>
        <LottieView src="pinjump.json" height="130" loop="true" autoplay="true"/>
      </StackLayout>
    </Page>
  `
}).$start()