lottie-react-native: Not loading on some Android devices when using `.lottie` files.

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:

Screenshot 2023-08-28 at 15 13 50

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

About this issue

Original URL
State: open
Created 10 months ago
Comments: 31 (1 by maintainers)

Most upvoted comments

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.

ifsnow on Aug 31, 2023

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:

Make an app release through the Playstore.
Use Code Push to make a codepush release.
Open app, wait for codepush update to come through.
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 https://github.com/microsoft/react-native-code-push/issues/2616

lilhuge on Nov 22, 2023

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.

matinzd on Jan 16, 2024

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

walterholohan on Nov 23, 2023

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

walterholohan on Nov 7, 2023