Support for NativeScript-Vue

[saikksub]

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.

[vlowe85]

I am also having issues getting this to work with Vue ans iOS.

I implemented as seen here - https://gist.github.com/rigor789/8c948c1a1d22a13ff351a8a342be6490

But get a crash on ReferenceError: Can't find variable: LOTAnimationView

[oronoa]

+1

[bradmartin]

@vlowe85 - Looks like your issue is a build issue and the native library is not compiled into your application. Cleaning the project with a rebuild should fix that issue. As for it working with Vue, Igor, did share that gist and it worked fine.

I'm not sure what the issue is that it's not working. If you place the json file in the app_resources according to the README with latest NS versions, you don't need to use the assets/ path on the src. So maybe it's just some confusion there causing the issue. Do let me know if that helps or if anyone wants to improve the README or provide a demo-vue to the repo 😄

[vlowe85]

Thanks @bradmartin , I think i was getting the ReferenceError: Can't find variable: LOTAnimationView error due to using the preview app, which i now understand is not supported.

Now deploying to iOS simulator, i have removed the ios platform and re run, i can see the animation but unable to get it to play despite setting the autoplay prop to true. In the loaded callback, see what i get below:

            lottieLoaded(args) {
                this.anim = args.object; // does set the object ok
                this.anim.playAnimation();
                console.log(this.anim.isAnimating()); // returns false
                console.log(this.anim.duration);  // returns null
                console.log(this.anim.progress); // returns null
                console.log(this.anim.speed); // returns null
            },

[vlowe85]

I do get success in Android. I did tns platform remove android and then tns platform add android. Then manually drop the lottie file into platforms/android/app/src/main/assets then tns run android --bundle.

The animation does play ok in Android.

            lottieLoaded(args) {
                this.anim = args.object; // does set the object ok
                this.anim.playAnimation();
                console.log(this.anim.isAnimating()); // returns true
                console.log(this.anim.duration);  // returns 1999
                console.log(this.anim.progress); // returns 0
                console.log(this.anim.speed); // returns null
            },

[vlowe85]

Updated to v3.0.0 i noticed released 9 days ago. Working on ios too now :)

[bradmartin]

@vlowe85 thanks for following up. Would you care to provide a vue snippet sample to the README in similar fashion as the angular snippet? You can post here and I can add if you don't have time to do a PR. Thanks

[MSergiu7]

I can't figure out how to do it. Looks like my app create the lottieview, but for some reasons, i don't get to see anything.

console: JS: 'animation page' JS: '{NSVue (Vue: 2.5.17 | NSVue: 2.0.2)} -> CreateElement(NativePage)' JS: '{NSVue (Vue: 2.5.17 | NSVue: 2.0.2)} -> CreateElement(NativeActionBar)' JS: '{NSVue (Vue: 2.5.17 | NSVue: 2.0.2)} -> AppendChild(ElementNode(nativepage), ElementNode(nativeactionbar))' JS: '{NSVue (Vue: 2.5.17 | NSVue: 2.0.2)} -> CreateElement(nativestacklayout)' JS: '{NSVue (Vue: 2.5.17 | NSVue: 2.0.2)} -> CreateElement(nativelottieview)''

My code looks like this: https://gist.github.com/MSergiu7/dcce168d74528194329b9fd419303e4e

Can anyone share a demo of vue-nativescript for android?

[vlowe85]

@MSergiu7 did you place the lottie file in platforms/android/app/src/main/assets then build?

[MSergiu7]

Yes, that path is platforms/android/app/src/main/assets/pinjump.json and i changed my src="~/pinjump.json" to src="pinjump.json" as in the readme. But still no results..

[dojo-coder]

@MSergiu7 @vlowe85 I also just tried it on Android. It doesn't work if you don't try what @vlowe85 posted. tns platform remove android and then tns platform add android and copy your lottie file. Not sure why this is required but it works.

Also later on if you want to add a new lottie file, it seems the same process is required, removing and adding the platform back.

UPDATE: 'tns prepare android' works just fine.

[bradmartin]

It's required because app resources are compiled. So the project requires a full build. Hope that helps explain why the platform remove/add works for a clean build.

If you were in Android studio and adding assets to the app assets, the project would usually automatically rebuild. It's same process and NS livesync if you're running should be kicking off a project rebuild if you add the asset to app resources. If you do it outside of livesync you'll have to rebuild manually.

[dojo-coder]

Thank you Brad for the info. I will check on the NS livesync.