Not loading on some Android devices when using .lottie files.

[jameskenyon]

Description

Lottie not loading on some Android devices when using .lottie files.
We have had reports of the Lotties not displaying for users on some device models. Manufacturers of these devices include, but are not limited to: Samsung, Huawei, and Xiaomi.
Tested on Google Pixel (could not reproduce) and Huawei (could reproduce).

We have reverted back to using .json files which has resolved the issues.

Steps to Reproduce

Animated Lottie View:
`
import Lottie, { LottieViewProps } from 'lottie-react-native'
import Animated, { Easing, useSharedValue, withTiming } from 'react-native-reanimated'

const AnimatedLottieView = Animated.createAnimatedComponent(Lottie)
`

Lottie component configuration:
<AnimatedLottieView source={require(path_to_lottie)} autoPlay loop />

Expected behavior:

Actual behavior:

React Native Environment

Node: 16.18.1
Yarn: 1.22.19
npm: 8.19.2
Watchman: 2023.08.14.00
CocoaPods: 1.12.1
react: 18.2.0 => 18.2.0
react-native: 0.71.12 => 0.71.12

Lottie Version

Version: 6.2.0

[walterholohan]

Hey @matinzd this is a continuation of the bug #1090. @jameskenyon is part of our team.

Let me know if you need any help to debug further.

Thanks

[ifsnow]

I think since v6 you have to explicitly specify the size of the animation with a style. (or flex: 1)

<AnimatedLottieView
  source={require(path_to_lottie)}
  autoPlay
  loop 
  style={{
    width: xxx,
    height: xxx,
  }}
/>

In my case, if I don't specify a size, it doesn't show up.

[matinzd]

Hi,

This is not related to .lottie files. If you do not specify width or height, the animation will not show up. This is a part of our breaking change for v6.

If that doesn't work, please reopen the issue.

[lilhuge]

Hi @matinzd - I work with @jameskenyon and @walterholohan, opening up this issue again on their behalf. Setting a height or width has not resolved the issue for us.

When using the .lottie format, initially, the animations load correctly. However, if the app crashes for any reason and we reopen it, the animations do not appear. Even after we force close and reopen the app, the animations which once rendered correctly do not appear. The rest of the app works fine. (see accompanying video). A complete reinstall is required before the animations appear correctly once again.

This behaviour is only present whilst we are using animations in the .lottie format works fine with JSON. Are you able to assist with this?
Config remains the same as described above in James' earlier post.

Thanks

2023_09_19_184206265.mp4

[matinzd]

Can you provide me a minimal reproduction repository so that I can dig into it? @lilhuge

[brennanho]

I am facing the same issue where my lottie file doesn't show anything but my json file does. I simply ran my json file through the dotLottie converter: https://lottiefiles.com/tools/lottie-to-dotlottie?utm_source=dotlottieio. I did not perform any code changes.

[Chermaley]

I am facing the same issue where my lottie file doesn't show anything but my json file does. I simply ran my json file through the dotLottie converter: https://lottiefiles.com/tools/lottie-to-dotlottie?utm_source=dotlottieio. I did not perform any code changes.

Met the same issue ios works well, but android doesn't show anything.

Fixed it by updating lottie-react-native to 6.3.1

[brennanho]

Mine is not working on the iOS simulator in XCode.

…

On Sun, Oct 29, 2023, 10:28 PM Chermaley ***@***.***> wrote: I am facing the same issue where my lottie file doesn't show anything but my json file does. I simply ran my json file through the dotLottie converter: https://lottiefiles.com/tools/lottie-to-dotlottie?utm_source=dotlottieio. I did not perform any code changes. Met the same issue ios works well, but android doesn't show anything. Fixed it by updating lottie-react-native to 6.3.1 — Reply to this email directly, view it on GitHub <#1098 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFDBATGMY56IXQ57SNPGDZTYB43JHAVCNFSM6AAAAAA4BP35T2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBUGUYDQOBRGY> . You are receiving this because you commented.Message ID: ***@***.*** com>

[GSTJ]

Happened here on Android, too. The emulator worked great - my physical Samsung test device did not. I had to revert all assets to .json

I did specify width and height; it's not related. The animations don't show up anyway.

I tested using a Samsung S10+.

[walterholohan]

Hey everyone, just to let you know that when we upgraded RN to 0.72.6 it seemed to have fixed the issue. We've had no reports from our users since

[matinzd]

Thanks for your update @walterholohan. I will mark this as resolved for now.
Feel free to open it again anytime.

[walterholohan]

@matinzd can we re-open, as we are still getting reports from users that the .lottie fail to load on some android devices

[GSTJ]

I'm still not seeing them on my Samsung S10+. The emulator works, though, so this looks pretty device-dependent.

[walterholohan]

We noticed that some users have 'Animations enabled' toggled off on their devices. Toggling this is on will make the lottie play.

However we have some users who's lottie wont even load, and to resolve this we need to get them to re-install the app. So it seems that something is happing when RN is loading the asset and trying to render.

[lilhuge]

We're using Code Push in our project. We've done some more digging and it appears that the issue only arises after a codepush release.

Steps to reproduce:

1. Make an app release through the Playstore.
2. Use Code Push to make a codepush release.
3. Open app, wait for codepush update to come through.
4. Animations no longer appear.

When making a new release through the Playstore, the animations appear fine.
When making a codepush release, the application will initially load correctly and render all animations fine. However, after the codepush update comes through (which can take a few moments, or be triggered by navigating to and from the application, as shown in my previous video), none of the animations render.
It appears that the dotLottie files are not being bundled correctly in the codepush release, whereas the .json files were being bundled fine.
Is there anything which can be done on your end to help with this?

Here's a similar issue raised with Microsoft microsoft/react-native-code-push#2616

[admapop]

I can replicate the issue exactly as @lilhuge. If I do not trigger codepush, the animation works fine, as soon as codepush lands the animations disappear completely.

[GSTJ]

I can say I'm building it directly to my S10+ and animations don't show up at all.

I use expo-updates on the app I tested on, but it never appears regardless of the app updating or not.

On my main iPhone it works just great.

Don't think it's necessarily related to Codepush and seems device/os specific.

[matinzd]

@walterholohan Are you also using Code Push?

[admapop]

@GSTJ If I build the app directly to my device in debug mode I can see animations working correctly, S9. It's definitely on Android side, but Codepush could definitely also affect it. Especially since I can actually see the animation in the production app as long as Codepush bundle has not landed.

[matinzd]

@admapop Can you try building your app in release mode for Android not debug?

[admapop]

@matinzd yep just built it for release and installed on device. On first load the animations work fine.

EDIT: Similar to production env. However, building in release mode and pushing it to device does not have codepush activated.

[walterholohan]

@matinzd yes just for context @lilhuge and I are on the same team at https://runna.com

[walterholohan]

@matinzd thank you for being so responsive on this. Its very much appreciated and hopefully we can find a solution

[matinzd]

@matinzd thank you for being so responsive on this. Its very much appreciated and hopefully we can find a solution

You're welcome! I would appreciate if only one of you responds to the issues as I felt like this is happening on different apps with different configurations. Most likely the issue is with Code Push.

[0xSaurabh]

Hey, we recently upgraded to 0.72.6, and for us dotLotties files aren't loading on iOS release. We had a code push setup before, but not right now. The animations were working fine before the upgrade, and we don't have the new architecture enabled.

Have we seen any progress on this issue?

[matinzd]

@0xSaurabh

Please open a new issue with a minimal reproducible code.

[walterholohan]

Hey @matinzd, appreciate all the effort you put into this. Have you got a chance to look at the Android/Codepush issue?

Luckily for Android its quick to do a new app release but would be super handy if we were able to do a codepush

[matinzd]

Hi @walterholohan,

I found a workaround that may work. Can you try to use .zip instead of .lottie for the file extension and do a codepush and see if it works?

[Amurmurmur]

@matinzd tried with a .zip extension, same issue
onAnimationFailed, this is the error I get

[matinzd]

I would suggest releasing your native binary when you have file changes or using .json for now until I can find the issue. I am currently busy with other tasks and don't have time to spend on this at the moment.

[walterholohan]

Hey @matinzd , any luck with the above?