Lottie animation is breaked on my app

[rsereir]

Description

I try to integrate lottie in my app but i notice all lottiefile integration does not render animation correctly. Every lottiefile is break ( a simple check mark is not shown correctly. First, i thought it was due to lottiefile incompatibility but i found this tuto with a simple astronaut animation:

https://www.youtube.com/watch?v=fLbtTL0rOcU

I found the animation here:

https://app.lottiefiles.com/animation/822c47f1-f147-4114-97ba-dd9e4f2ef8d0?channel=web&source=public-animation&panel=download

And this is my render:

Steps to Reproduce

Just follow tutorial with this final code:

  <View flex={1} alignItems="center" justifyContent="center">
    <LottieView
      source={require('assets/lottiefiles/connector/connecting.json')}
      style={{ width: '80%', aspectRatio: 1 }}
      autoPlay
      loop
    />
  </View>

Expected behavior: [What you expected to happen]
correct render
Actual behavior: [What actually happened]
break render

Minimal reproduction

  <View flex={1} alignItems="center" justifyContent="center">
    <LottieView
      source={require('assets/lottiefiles/connector/connecting.json')}
      style={{ width: '80%', aspectRatio: 1 }}
      autoPlay
      loop
    />
  </View>

React Native Environment

System:
OS: macOS 14.3
CPU: (10) arm64 Apple M1 Max
Memory: 295.38 MB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.17.1
path: /var/folders/kl/1qr4bhg95671w9cjqmv8n5gr0000gn/T/yarn--1709496294946-0.6950116481454138/node
Yarn:
version: 1.22.19
path: /var/folders/kl/1qr4bhg95671w9cjqmv8n5gr0000gn/T/yarn--1709496294946-0.6950116481454138/yarn
npm:
version: 9.6.7
path: ~/.nvm/versions/node/v18.17.1/bin/npm
Watchman:
version: 2024.01.22.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.14.0
path: /Users/rsereir/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.2
- iOS 17.2
- macOS 14.2
- tvOS 17.2
- visionOS 1.0
- watchOS 10.2
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode:
version: 15.2/15C500b
path: /usr/bin/xcodebuild
Languages:
Java: Not Found
Ruby:
version: 3.0.6
path: /Users/rsereir/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.2
wanted: 0.73.2
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

info React Native v0.73.5 is now available (your project is running on v0.73.2).

Lottie Version

Version: 6.6.0

[TheRogue76]

Hi @rsereir
Thanks for the issue. I will take a look as soon as I have some free time and get back to you

[matinzd]

Try to use renderMode={'SOFTWARE'} prop and see if that helps.

[rsereir]

Hi @TheRogue76 thank you for your investigation.

Hello @matinzd, i just try it but it does not change anything, thanks for your help.

[sosiii4799]

I have the same problem, does anyone have a solution?

[rsereir]

@sosiii4799 if you found any solution do not hesitate to replay :)

[buschco]

renderMode={'SOFTWARE'} seems to fix these strange issues for me! 🙏

[TheRogue76]

Hi @rsereir. I got a chance to grab the Animation and run it:
iOS:

Android:

And i made a reproducible repository: https://github.com/TheRogue76/LRN1194
I am not seeing your specific issue anywhere. Can you provide a reproducible on your side with more info so i can take another look?

[pariah140]

I have the exact same issue.

[rsereir]

@TheRogue76 Have you download the json format ?

[TheRogue76]

@TheRogue76 Have you download the json format ?

Yes. From the video's link. Also included in the repo is linked

[pariah140]

@TheRogue76 Have you download the json format ?

I also downloaded JSON format from lottie directly.

[albertoarraco]

I have same issue.

I try download json and lottie files but nothing it works.

The spaceman works for me, but with severals lottie files fail.

I'm trying now this https://lottiefiles.com/animations/blue-titles-editing-ciYXusdKbX

Lottie version 6.7.0

[sosiii4799]

banner.json
I just downloaded the file above https://lottiefiles.com/ and it has an error

[TheRogue76]

@rsereir Any updates?

[pariah140]

going to have to get rid of this library. It just doesn't work

[TheRogue76]

going to have to get rid of this library. It just doesn't work

Hot take here: then help fix it. That's what open source is. Nobody is getting paid for any of this, we are all just trying to make things work and it only works if the entire community works on it. Provide a reproducible, give some sort of data for others to be able to debug. Write a PR, there are tons of ways to contribute.

That sentence isn't one of them.

[TheRogue76]

To the person who said it's a freemium model and deleted their comment, other than the fact that the comment was extremely rude, it was hilariously inaccurate.

Here are some free stats for you:

1. We aren't paid. None of us. Nobody in this repo.
2. This library originally belonged to AirBnB back when they were using React Native, and when they stopped, they graciously allowed the library to be passed to the community to be maintained and used. They still allow our docs to be hosted on the same website for which we are very grateful.
3. The current maintainers, mostly me and @matinzd, are former React Native devs that were forced to change our jobs and move out of the field, but kept some level of passion for React Native because we believed that it can be a good thing for the mobile ecosystem and decided to keep the torch going and maintain this and pass it along to whoever comes after us.
4. The work we do here is voluntary. We try to keep Lottie in sync with RN, and the Native Lottie iOS and Android projects and try to work with other people in our field like Expo, and maybe implement features that people ask for. The goal is to be a wrapper for Lottie so that RN developers can have the same tools and same utils as every other mobile dev. If there is a bug, we try to address it, we ask for info, we make try to replicate and address (Like the reproducible repo that i created for this specific bug which you can see).
5. There is a sponsorship link in this repo for @matinzd. To my knowledge up to this very day, only one person has ever sponsored him, which he sponsors back. We never asked for it, we never pushed for it.

I am only going to answer to comments regarding the issue that @rsereir has raised moving forward. Thanks for ruining whatever energy i had left for working on this.

[matinzd]

going to have to get rid of this library. It just doesn't work

Feel free to do so.

[rsereir]

Hello,

I see that there have been a lot of discussions on the subject and that some are frustrated to see that it doesn't work for them while it works for others. This is also my case, but as you specified above this is an opensource project I think that the best way to move this issue forward is to use our time in the best possible way to provide as much information as possible so that people who are familiar with the source code of this library and how LottieFiles work can have clues. This seems more productive than just saying "it doesn't work, it's no use, I'm changing the lib"..

For my part I tried to look into the problem again this weekend, I'm pretty sure that it doesn't really come from the Lottie images but more from the library actually. I tried to investigate the source code but I think I am not competent enough to shed light on this subject. It would seem from previous comments that on a react native project without any code it works quite well. So I wonder if this is not an interference with another library which would be very widely used? (react navigation, or other for example)

I can offer to allow someone experienced on the subject and who wishes to investigate to access a fork of my project to try to find a solution.

Please let me know if I can help with anything else..

[TheRogue76]

Hello,

I see that there have been a lot of discussions on the subject and that some are frustrated to see that it doesn't work for them while it works for others. This is also my case, but as you specified above this is an opensource project I think that the best way to move this issue forward is to use our time in the best possible way to provide as much information as possible so that people who are familiar with the source code of this library and how LottieFiles work can have clues. This seems more productive than just saying "it doesn't work, it's no use, I'm changing the lib"..

For my part I tried to look into the problem again this weekend, I'm pretty sure that it doesn't really come from the Lottie images but more from the library actually. I tried to investigate the source code but I think I am not competent enough to shed light on this subject. It would seem from previous comments that on a react native project without any code it works quite well. So I wonder if this is not an interference with another library which would be very widely used? (react navigation, or other for example)

I can offer to allow someone experienced on the subject and who wishes to investigate to access a fork of my project to try to find a solution.

Please let me know if I can help with anything else..

Hi @rsereir
Thank you for the offer. If your project is not owned by an organization or another person of any kind, feel free to add me and Matin to the fork and we can take a look. If it is for an employer or a client, do not add anyone without their express permission and approval. Another possible solution is that, for this once, perhaps we can schedule a call over the weekend and you can walk me through it without giving access and i might be able to create the reproducible given enough data and in a more controlled environment. The same ruleset regarding employer / org approval stands here as well.

To be clear for future reference, this is an exceptional case, not something i will offer for any other issue in this repository.

As for the rest, please provide reproducible if possible.

[rsereir]

Hello @TheRogue76 , i just add you on the fork repository ( and @matinzd too ).

You have on this repository the react native project concerned by this issue. It's my own side project so you can download it without any worry.

I think you can just add lottie file directly in the login screen for tests.

Tell me if i can help you for this fix.

Rédoine

[matinzd]

I had a chance to test out your animation (empty-content.json) when I had some free time. I tried it out using the native Lottie iOS app, as well as running it within your app, and the outcome was consistent across both platforms. It seems that the animation might be utilizing certain features that aren't supported on iOS and Android.

[matinzd]

UPDATE

Please submit a bug to https://github.com/airbnb/lottie-ios and share your animation there. @rsereir
Lottie web editor shows no issues for the compatibility matrix:

Please link this issue as well.

[calda]

Yes, if you're seeing rendering issues when rendering a Lottie animation on iOS, please open an issue on the lottie-ios repo. I'll take a look when I have a chance.

[matinzd]

Closed in favor of: airbnb/lottie-ios#2345 (comment)