onAnimationEnd fires multiple times when trying to alternate animation

[LinusU]

Description

I'm trying to play an animation alternating back and forth, also called play mode bounce.

The most straight forward way to do this, that I could think of was to alternate speed between 1 and -1, and having the change occur in onAnimationFinish.

In earlier versions of lottie-react-native (or rather, earlier versions of Expo) I think that this worked fine. But today, when using Expo SDK 49 and version 5.1.6 of this package, it does not.

(I'm currently working on an iOS only app, but from a quick glance at the Snack it seems like speed={-1} isn't working at all on the web)

Steps to Reproduce

1. Add a LottieView with a speed state variable initialized to 1
2. Add an onAnimationFinish handler that change the speed between -1 and 1
3. Observe that the animation does not play smoothly back and forth, but instead behaves erratic
4. Add a console.log to onAnimationFinish and see it being called a lot

Expected behavior: onAnimationFinish would only be called exactly once at each end of the animation

Actual behavior: onAnimationFinish is called multiple times, which makes the speed change more than once at each end, which sometimes also triggers the entire animation to flash to white and then restart

Minimal reproduction

https://snack.expo.dev/@linusu/lottie-alternate-animation

React Native Environment

• Expo SDK 49
• Expo Go
• iOS 17.0.2
• iPhone 14 Pro

Lottie Version

Version: [email protected], [email protected]

Extra request

It would be really nice if there could be a alternate prop on LottieView that made the animation loop by playing it first forwards, then backwards, and so on 🙏

[matinzd]

Hi Linus,

Is there any reason for not using the latest version? Currently I am not focused on v5 and this may have been fixed in v6 with all the new changes.

If it's possible please try the latest version and let me know if it works.

[LinusU]

Sorry, I didn't realise that there was a version 6 released.

5.1.6 is the version currently supported by Expo SDK 49, the latest sdk version.

It seems like PR 23843 updates this, so it should be a part of Expo SDK 50.

---

Apart from that, how do you feel about adding a alternate?: boolean or mode?: 'bounce' or similar prop to do this natively without having to keep track of state and re-rendering ourselves?

[matinzd]

That's a good idea. I will try to add it when I find some time. Are you using Expo Go? You can use Expo Prebuilt to use the latest version of the libraries.