lottie-react-native: Autoplay not working in modal screen with wix/react-native-navigation

Description

We recently updated react-native-lottie from v4.0.2 to v5.1.3. After this update we started encountering an issue only on iOS with LottieView in modal screen managed via wix/react-native-navigation . The auotplay does not start. I do not know if this issue can be reproduced with other navigation SDKs.

In order to to fix this issue at the moment I used a workaround with useRef, useEffect and a timeout:

useEffect(() => { setTimeout(() => animationRef.current?.play(), 100); }, []);

In this way I managed to start the animation.

Steps to Reproduce

Integrate LottieView in a modal screen with autoplay
Open modal screen

Expected behavior: Lottie animation should play automatically

Actual behavior: The Lottie animation does not start

Versions

lottie-ios: “^3.2.3”, lottie-react-native: “^5.1.3”,

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 5
Comments: 21

Most upvoted comments

Here is a simple hack, use onLayout prop and autoPlay prop both of LottieView and play it like this,

const animationRef = useRef(null);

<LottieView ref={animationRef} onLayout={_ => animationRef.current?.play()} source={YourAnimation} autoPlay loop style={{ ..yourStyles }} />

arham1999 on Sep 9, 2023

We still have this issue on react-native version 0.70.9. If there is no intention to fix this issue – maybe we should at least document the workaround?

Hi Fotos, Sorry for the inconvenience this has caused to anyone. There are some other issues which is priotised to be done. This is on my radar and I am the only one maintaining this library actively. I appreciate your patience and we will try to get to this issue as soon as possible.

matinzd on May 16, 2023

Hi there, I have exactly the same Issue.

cdans on Jul 28, 2022