Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork1.8k
Description
Description
Problem
twice.webm
The onAnimationFinish callback is being called twice when autoPlay=true and system animations are disabled.
It is known that when autoPlay is enabled, we should not explicitly call runAnimation, as doing so can cause the animation to play twice. This issue has been documented in the past — for example, see:
airbnb/lottie-android#1500
However, in lottie-react-native, runAnimation is being called even when autoPlay is enabled. This likely results in duplicated animation playback.
Relevant code:
Lines 198 to 202 in74108fb
| autoPlay?.let { | |
| if (it&&!view.isAnimating) { | |
| view.playAnimation() | |
| } | |
| } |
Additionally, I noticed that the autoPlay prop is correctly passed to the native Lottie module:
Lines 293 to 299 in74108fb
| @JvmStatic | |
| funsetAutoPlay( | |
| autoPlay:Boolean, | |
| viewManager:LottieAnimationViewPropertyManager | |
| ) { | |
| viewManager.autoPlay= autoPlay | |
| } |
Proposed solution
- Remove the explicit call to runAnimation when autoPlay is enabled.
Steps to reproduce
- Go to phone Settings -> A11y -> Use reduced motion (or remove animation, depending on the phone)
- Run sample repo
- See duplicated onAnimationFinished log
Snack or a link to a repository
https://github.com/sookcha/lottie-react-native/tree/master/example
Lottie React Native version
7.3.3
React Native version
0.78.3
Platforms
Android
Workflow
React Native
Architecture
Old Architecture
Build type
Debug app & dev bundle
Device
Android emulator
Acknowledgements
Yes