Lottie animation is broken with 6.1.0

[AndreiBehel]

Description

Lottie animation is broken

Steps to Reproduce

1. Add lottie animation
2. Start animation

Expected behavior (5.1.5):

2023-08-07.18.17.30.mp4

Actual behavior (6.1.0):

2023-08-07.18.17.26.mp4

Minimal reproduction

...
<LottieView
    style={{
       height: 70,
       marginBottom: 40,
       width: 70,
     }}
    source={processing}
    autoPlay
    loop={false}
/>
...

lottie.json

{"v":"5.6.6","ip":0,"op":160,"fr":60,"w":70,"h":70,"assets":[],"layers":[{"ind":386,"nm":"surface1542","ao":0,"ip":0,"op":264,"st":0,"ty":4,"ks":{"ty":"tr","o":{"k":100},"r":{"k":0},"p":{"k":[0,0]},"a":{"k":[0,0]},"s":{"k":[133.33,133.33]},"sk":{"k":0},"sa":{"k":0}},"shapes":[{"ty":"gr","hd":false,"nm":"surface1542","it":[{"ty":"gr","hd":false,"it":[{"ty":"sh","ks":{"k":{"i":[[0,0],[-1.24,0],[0,-1.24],[0,0],[0.92,-0.51],[0,0],[0.59,1.05],[-1.05,0.59],[0,0]],"o":[[0,-1.24],[1.24,0],[0,0],[0.32,0.96],[0,0],[-1.05,0.59],[-0.59,-1.04],[0,0],[0,0]],"v":[[24.75,12],[27,9.75],[29.25,12],[29.25,25.76],[28.25,28.32],[15.23,35.62],[12.27,34.78],[13.11,31.83],[24.75,25.3]],"c":true}}},{"ty":"sh","ks":{"k":{"i":[[0,0],[0,0.68],[0.69,0],[0,-0.69],[-0.68,0]],"o":[[0.69,0],[0,-0.69],[-0.68,0],[0,0.68],[0,0]],"v":[[26.84,27.82],[28.08,26.57],[26.84,25.33],[25.6,26.57],[26.84,27.82]],"c":true}}},{"ty":"fl","o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":59,"s":[0]},{"t":109,"s":[100]}],"ix":5},"c":{"k":[0.29,0.75,0.69,1]}},{"ty":"tr","o":{"k":100},"r":{"k":0},"p":{"k":[0,0]},"a":{"k":[0,0]},"s":{"k":[100,100]},"sk":{"k":0},"sa":{"k":0},"hd":false}]},{"ty":"gr","hd":false,"it":[{"ty":"sh","ks":{"k":{"i":[[0,0],[3.11,0],[0,3.11],[-3.11,0],[0,-3.11]],"o":[[0,3.11],[-3.11,0],[0,-3.11],[3.11,0],[0,0]],"v":[[32.25,26.62],[26.62,32.25],[21,26.62],[26.62,21],[32.25,26.62]],"c":false}}},{"ty":"fl","o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":59,"s":[0]},{"t":109,"s":[30]}],"ix":5},"c":{"k":[0.29,0.75,0.69,1]}},{"ty":"tr","o":{"k":100},"r":{"k":0},"p":{"k":[0,0]},"a":{"k":[0,0]},"s":{"k":[100,100]},"sk":{"k":0},"sa":{"k":0},"hd":false}]},{"ty":"gr","hd":false,"it":[{"ty":"sh","ks":{"k":{"i":[[0,0],[18.78,0],[0,18.78],[-18.78,0],[0,-18.78]],"o":[[0,18.78],[-18.78,0],[0,-18.78],[18.78,0],[0,0]],"v":[[69,35],[35,69],[1,35],[35,1],[69,35]],"c":false}}},{"ty":"st","lc":1,"lj":1,"ml":4,"o":{"k":100},"w":{"k":2},"c":{"k":[0.29,0.75,0.69,1]},"hd":false},{"ty":"tr","o":{"k":100},"r":{"k":0},"p":{"k":[0,0]},"a":{"k":[0,0]},"s":{"k":[75,75]},"sk":{"k":0},"sa":{"k":0},"hd":false}]},{"ty":"tr","o":{"k":100},"r":{"k":0},"p":{"k":[0,0]},"a":{"k":[0,0]},"s":{"k":[100,100]},"sk":{"k":0},"sa":{"k":0},"hd":false}]},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.27],"y":[1]},"o":{"x":[0.5],"y":[0]},"t":0,"s":[0]},{"t":66,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"hd":false}]}],"meta":{"g":"LF SVG to Lottie"}}

Versions

lottie-react-native: 6.0.1 and 6.1.0

react-native: 0.71.12

architecture: paper(old)

[mlazari]

I had a similar issue, the animation not showing properly on iOS with v6. Fixed it in 6.0.1 by setting renderMode="SOFTWARE". In 6.1.0 got a different issue (#1081), so I'll stay on 6.0.1 for now.

[matinzd]

If you set renderMode="SOFTWARE" it works properly. Try opening an issue in lottie-ios repo. It seems some animations are broken on HW mode.

[AndreiBehel]

@matinzd Thank you for your workaround, I've created the issue in lottie-ios repository

[mlazari]

@AndreiBehel Thank you. I didn't create an issue earlier when I encountered this because I was not sure if it is a bug or it's just the animation using some features that are not supported in hardware mode (I tried previewing the animation in https://apps.apple.com/us/app/lottiefiles-animate-design/id1231821260 and it was having the same issue). We'll hopefully find out soon.

[matinzd]

I am going to close this issue as it's not the problem with react native library. Please follow the issues below for more information:

https://github.com/airbnb/lottie-ios/issues?q=is%3Aissue+is%3Aopen+label%3A%22Core+Animation+rendering+engine%22

airbnb/lottie-ios#2060