Lottie animation color not loading

Please provide the following:

  1. SDK Version: 40
  2. Platforms(Android/iOS/web/all): Android/iOS
  3. Add the appropriate “Tag” based on what Expo library you have a question on.

I downloaded a Lottie file and the fill color for the Lottie animation is coming out a different color than online and I thought maybe it’s the background color or whatever. Changed the background color online and downloaded it again and it’s the same thing.

So I opened it in Lottie editor in VScode and the fill color shows red like it is supposedS to but in my react native app it is showing with a different fill color. I put it in different screens of my app to see if there is anything else that is messing with it and still running into the same problem.

So I opened it in After Effects and after effects gave me an error about not being able to import the fill color.

idk what is going on but this is very much throwing me off. The animation is supposed to have a red radial fill color but I’m gradient white to black radial color.

What it is supposed to look like: heartbeat on Lottiefiles. Free Lottie Animation

What I’m getting:
image

Hey @a_creative_username, can you try putting it in a vanilla react native app and see if the same issue occurs? Before moving forward, it’d be nice to know if this is a expo-specific issue or not.

Cheers,
Adam

I went and found a codesandbox.io and replaced the json files data with the heartbeat file data and it fully worked.

Click todo 1 and 2 and then press submit

Edit: I’m also doing it in vanilla react-native right now. Sorry I had read your message as React

After a lot of research I found out that basically Lottie for react native is being pure garbage. Lottie is trying to release a new version and not even paying attention to the fact the entire thing is useless…sorry am a bit annoyed at this as I spent way too much time thinking it was me and basically it’s them.

hey there,

the version of lottie included in expo right now is out of date so ymmv when using lottie files intended for the latest version. i know it doesn’t help much with your current frustration, but we’re updating it in sdk 41 to be released in april.