Render issue on a lot of lottie files in react native

[rsereir]

Hello !

We are lot people with render issue on a lot of LottieFiles in react native. This issue is the continuation of another issue opened here lottie-react-native/lottie-react-native#1194

This is the current render:

This is the animation:

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

[calda]

Can you upload the animation file directly to this issue? I don't have permission to view the link you shared:

[rsereir]

Hello @calda, Thanks for you quick answer !

Sorry i give you a private url, this is the public url with all features used, etc:

https://lottiefiles.com/animations/astronaut-light-theme-keS0ihnMAU?from=search

[calda]

The animation you linked renders as expected when I test it in our sample app:

Please share a sample Xcode project that demonstrates the animation rendering incorrectly.

[matinzd]

It seems like the animation that you are sharing is different than the one that is actually in your app 😅

This is the one you are using:

https://app.lottiefiles.com/share/5052c0b3-ed25-46c1-9db4-b7911c352073

[rsereir]

@matinzd hello ! No, it's my first link used here, but i just custom colors in my lottie files editor..
Otherwise, in itself it doesn't change anything I think the link you provided seems to be someone who did like me, starting from the same lottie and only changing the colors

[matinzd]

This is your json file that I imported from the project into lottiefiles editor.
You need to share the one that you modified not the original one.
The original one is working as expected but the modified version is having some rendering issues on iOS and Android, not on web ...

[rsereir]

@matinzd It may be simpler to work with the original lottiefile, I can provide you with the same rendering problem screens with the original one if it allows us to move forward

[matinzd]

Can you share the code that you are using here as well? Just the <LottieView /> component with its props would be enough. @rsereir

[rsereir]

        <LottieView
          source={require('assets/lottiefiles/spinner.json')}
          style={{ width: '35%', aspectRatio: 1 }}
          autoPlay
          loop
        />
        
        This is the usage @matinzd 

[matinzd]

Can you try with renderMode={'SOFTWARE'} or renderMode={'HARDWARE'} ?

[matinzd]

I am not sure which one you are using! :D I created a pull request on your repo and you can also check it out in your login screen. It seems you are using a wrong animation.

[rsereir]

Can you try with renderMode={'SOFTWARE'} or renderMode={'HARDWARE'} ?

With both suggestions it's not working correctly.. I use the good lottie file ( from download link in the offical lottie marketplace ), i tried on my login screen and inside my dashboard app and render is breaked on both

[matinzd]

This is your app's screenshot and I even made a pull request on your fork repo. I cannot reproduce the issue you are having. Try checking out to the branch and see your login screen there.

https://github.com/rsereir/fork-lottie-error/pull/1

[calda]

I can reproduce the rendering issue with the animation that was modified in the LottieFiles editor:

issue_2345.json

[matinzd]

Yes I could also reproduce the rendering issue with the modified file but not with the original file.

[rsereir]

@matinzd / @calda It's mandatory to add LottieFile in workspace to download, if i didn't edit anything but i add this on my workspace it's already corrupted or non ? someone can share the working json here ?

Thanks a lot for your investigations !

[matinzd]

The working animation is in the PR I shared in your repo. Please check out there and try running the app.

[rsereir]

@matinzd Wow, i just try with the json given in PR of my fork and it's working correctly, juste to be understand how you download the public lottie: you add lottiefile to your workspace and download from workspace ? or you use other method to download it

This issue is also on files edited by author directly on lottiefiles.com and posted publicly in marketplace ?

[rsereir]

Thank you for your investigation, it still shows that it works correctly if you download without going through the editor, that's good news

[pariah140]

Thank you for your investigation, it still shows that it works correctly if you download without going through the editor, that's good news

@rsereir - what do you mean by download without going through the editor? I can't see another way to download it.

[rsereir]

@pariah140 you have to "share" the lottie, and a public json url is generated by lottiefiles website. You have to go on the json file in your browser and copy content ( or download file directly from this page )

Don't use the standard " Download " button or add to workspace button

[pariah140]

amazing thanks so much @rsereir for such a fast reply! I will try it now.

[pariah140]

@pariah140 you have to "share" the lottie, and a public json url is generated by lottiefiles website. You have to go on the json file in your browser and copy content ( or download file directly from this page )

Don't use the standard " Download " button or add to workspace button

@rsereir sorry to ask again. Once you are on the share page where are you downloading it from? I've looked in the network tab but all I see is a loader.json (which I presume is the lottie loading spinner).

[jrlmontejo]

I found that merely changing the color palette of the lottie file in the website editor will cause it to break. If you don't make any changes in the editor and download the lottie file directly, there won't be any issues.

[pariah140]

I found that merely changing the color palette of the lottie file in the website editor will cause it to break. If you don't make any changes in the editor and download the lottie file directly, there won't be any issues.

Yeah that works for me! Thanks a lot!