Extremely slow Android animation

[etodanik]

Description

Expo 48 Android animation is MUCH, MUCH slower than iOS (iOS is mega smooth, Android is like, 5-6 FPS)

This is the JSON that I'm using as an animation (it reports a fully compatible matrix on LottieFiles):
hero.json.zip

Edit:
The Android device itself is quite capable. It's OnePlus 7 Pro, and runs quite heavy 3D games without any issues. So the GPU should handle this?

[RRaideRR]

Have you found a solution here @israelidanny ? I also noticed that.

[Immacio]

Any solutions?

[etodanik]

@RRaideRR @Immacio , nope. Absolutely no solution. Would be amazing if any contributors or maintainers could give this any attention.

[etodanik]

Hi dear maintainers @emilioicai @matinzd @lelandrichardson
This bug renders this totally unusable for me on Android. I would love to contribute somehow even, but some guidance from maintainers would be super appreciated.

[matinzd]

Have you tried this animation on a native app as well? Install Lottie Files app and try the animation there and see if that is still slow.

If it's slow there as well, we cannot do anything on React Native side. The you can open issue in lottie-android repo:

https://github.com/airbnb/lottie-android

Checkout this section as well:

https://airbnb.io/lottie/#/android?id=performance

[punjasin]

i can't fix only way to fix is reduce size in lottie file on after effect or using
optimize lottie from lottie website(need to upload lottie and then use optimize tool) but need to buy yearly subscription

[TheRogue76]

Hi guys.
We are now supporting dotLottie, a newer more efficient file format for lottie, that is loads the animation directly on the Native side instead of sending it through like we have to do with JSON. Can you guys test that out and see if the problem still exists?
You can convert your JSON animations to more compact dotLottie files using things like https://lottiefiles.com/tools/lottie-to-dotlottie or https://iconscout.com/converter/lottie-json-to-dotlottie or whatever else you can find online

[TheRogue76]

Closing since there have been no more responses.

[devpate9]

@TheRogue76 issue still exists. the small lottie animation itself makes the app slow/lag

[etodanik]

Yeah, there's nothing about this that's completed. Lottie is practically unusable on Android

[devpate9]

Yes i see

any solution @etodanik

[TheRogue76]

Ok. What did you guys try? What were the results? Did you try dotLottie? Loading the animation asset on the native side? I need responses and data otherwise there is very little i can help with

[IlinIgor]

@TheRogue76 I have the same issue on Android, how can I use dotlottie with react native? It seems like it works only on native side, isn't it?

[TheRogue76]

@TheRogue76 I have the same issue on Android, how can I use dotlottie with react native? It seems like it works only on native side, isn't it?

In order to work with dotLottie, all you need to do is transform your JSON animation to dotLottie using a tool like https://lottiefiles.com/tools/lottie-to-dotlottie or https://iconscout.com/converter/lottie-json-to-dotlottie, and then making one small modification to your metro file: (instructions here). You don't need change any other piece of code on your JS or Native side after that. The import would look the same as it did with JSON (with a different file extension) and everything else would be the same. No need to do anything on the Native side.
If for whatever reason you can not turn your JSON animation into dotLottie and need to squeeze out as much performance as possible, then you can bundle the animation as a native asset, and just pass the name of the asset for the source prop. The component should take care of the rest.

[RRaideRR]

Unfortunately, I cannot get it working on Android (on iOS, dotlottie files worked for me). I just created a minimal reproducible example and opened up an issue.