How do you build rapidly animated icons for your navigation bar? In NativeScript, we can achieve this with CSS and JavaScript through the animate function but the quality of the icon might not be that great for multiple reasons.

This is why we had to have Lotties.

According to Lottie's official documentation, a Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets(like an image) They are small files that work on any device and can scale up or down without pixelation(they are like SVGs. They don't lose quality when the width and/or the height of the screen changes.

The beating heart gif above is a Lottie animation.

But this format although extremely useful has some drawbacks.

Rive is playing in Lotties'playground and offers some serious advantages like a smaller size among others.

You can learn more about the differences between Lottie and Rive here

Sidharth Khurana also wrote an eloquent comparative of these 2 animation formats

Rive in NativeScript

NativeScript will be joining other popular frameworks like Flutter and React Native to fully support Rive animation and we can only be grateful for that.

Without a doubt, UI and UX tooling in NativeScript will be enhanced which will make the development process much more enjoyable and the migration of those who were already using Rive with other frameworks, easier.

I can't wait to test it... Stay tuned for upcoming articles.

PS: we will be building a clinic calculator this Sunday.