Download lotties json fies not working on expo android.

[LucasJandrey5]

Description

lotties json files that I downloaded from the website are not reproducing in expo android.

In my phone (Galaxy S23) the animation begin but stop in middle
On android simulator the app crashs

All animations works in https://lottiefiles.github.io/lottie-docs/playground/json_editor/

In json_editor the downloaded files have many errors but works

Steps to Reproduce

1. Download json anim from Lottie Files site

Minimal reproduction

Code:

import LottieView from "lottie-react-native";

<LottieView
        source={require("./animation.json")}
        style={{ width: "100%", height: "50%" }}
        autoPlay
        loop
      />

Tested files:
animation.json
success.json
anim.json

React Native Environment

expo: "^49.0.23"
lottie-react-native: "^6.6.0"
react-native: "0.72.10"

package.json

Lottie Version

Version: ^6.6.0

[iatanasov37]

Hey, I had the same issue and found that as of the newer versions of Lottie React Native you need to do follow this Migration guide

I ended up with something like this:

1. Created my own Animate bootstrapped Lottie:

// animated-lottieview.tsx

import LottieView from "lottie-react-native";
import { Animated } from "react-native"; //Use reanimated if you want to here

export const AnimatedLottieView = Animated.createAnimatedComponent(LottieView);

2. Use it as a the regular Lottie view:

<AnimatedLottieView
        source={require("./animation.json")}
        style={{ width: "100%", height: "50%" }}
        autoPlay
        loop
/>

3. Profit

I hope this helps.

[LucasJandrey5]

Hello, thanks for response

I tried your solution but not works, got same error

And tried with react-native-reanimated too

I try too follow step by step of expo docs:
https://docs.expo.dev/versions/latest/sdk/lottie/

But not works too.

Beetween the test interval, i reset cache and reinstal packages with npm install

[FESEVA]

Same for me 😭
Tried with these combinations:

• Expo 50

  • "lottie-react-native": "6.7.0"
  • "react-native": "0.73.6"

• Expo 50

  • "lottie-react-native": "6.5.1"
  • "react-native": "0.73.5"

• Expo 50

  • "lottie-react-native": "6.3.1"
  • "react-native": "0.73.5",

Its working on IOS but nothing is displayed on Android Emulator / Device

[bedirhangull]

Same issue :(
<LottieView autoPlay loop={true} ref={lottieRef} style={{ width: '100%', height: '100%', }} source={require('../../assets/animations/animation.json')} />

"expo": "~50.0.15",
"lottie-react-native": "6.5.1",

[joaomellogomes]

Same issue here. I've tried a lot different approaches including use .lottie files instead of json.
I've noted that other simpler animations in my Android app works fine. They have 51kb and 17kb and works perfectly on Android and IOS, but the animation with 775kb (.json) works on IOS and not on Android, I've also tried to use .lottie (55kb) and the same result on Android. Just wondering, I don't know if it's related to the files sizes.

[pripoliveira50]

the same issue..

   "expo": "^51.0.0",
   "react-native": "0.74.1",

But my problem was resolved with the comment:
#1187 (comment)

[bibhuti9]

I'm facing the same issue.

 "react-native": "0.73.4",
 "lottie-react-native": "^6.4.1",

[bibhuti9]

I found a solution. Please remove the height and width point values.

Before

"h": 121.07,
 "w": 153.26,

After

"h": 121,
"w": 153,

[alextbogdanov]

Same issue here.

[Hulker]

Same issue also
"expo": "^51.0.0",
:-(

[Hulker]

Same issue also "expo": "^51.0.0", :-(

I went back and experimented with the code. Previously (before Expo 51), it worked just fine when I only set the height. However, this time adding a width seems to have resolved the problem.

Before:

<LottieView
                      style={{ height: 170 }}
                      source={require("../assets/lotti/goldlotti1.json")}
                      autoPlay
                      loop={true}
                      resizeMode="cover"
                    /> 

After:

<LottieView
                        style={{ height: 170,**width:170** }}
                        source={require("../assets/lotti/goldlotti1.json")}
                        autoPlay
                        loop={true}
                        resizeMode="cover"
                      /> 

I hope this information is what you were looking for.