The animation don't move

[weiawesome]

Description

[Description of the bug]

Steps to Reproduce

In short, I found that I used the app in dark mode it would stop.
(In IOS.)
later I will test Android, thanks.
And if I turn off the dark mode, it will work again(be ok)

Expected behavior: move

Actual behavior: don't move

Versions

"react-native": "0.69.6",
"lottie-react-native": "^5.1.4",

[matinzd]

What do you mean? Can you please send us a reproducible code or video for this issue?

[weiawesome]

No problem!
This an app I made. And develope with expo.
https://github.com/weiawesome/HSR_Booking_App/blob/main/Result_img/problem.mp4

My phone is i13mini. Use expo-go app to preview it.
However, I try the same situation in Android device(Samsung s10+), but it is normal and can work.
And it is normal too in Android exported->aab file(it is normal and can work)

thank you to reply my question!

[matinzd]

https://github.com/weiawesome/HSR_Booking_App/blob/main/Result_img/problem.mp4

Are you using it in a modal?

[weiawesome]

No!
I use a view to wrap it and let its Zindex be the top.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[syou98]

Hey @weiawesome
Did you find a solution ?
I have the same issue ...
Thank you

[weiawesome]

Hey @weiawesome

Did you find a solution ?

I have the same issue ...

Thank you

I remember don't switch the darkness mode after into the app then the bug will not exist in IOS.

[450Oucema]

@syou98 @weiawesome
Did you tried to listen to AppState change events ?
I think that when you open the control center, the app states changes and the lottie stops.

you can try something like that:

const ref = useRef<LottieView>(null);

  const resetLottie = useCallback((state: AppStateStatus) => {
    if (state === 'active') {
      ref.current?.reset();
      ref.current?.play();
    }
  }, [ref]);

  useEffect(() => {
    const subscriber = AppState.addEventListener('change', resetLottie);
    return () => {
      subscriber.remove();
    };
  }, []);

  return (
    <LottieView
      ref={ref}
      {...props}
    />
  );

This will reset your lottie animation when you'll get back to the app.

[TheRogue76]

Is this issue still a problem with the latest version (6.5.1)? I can take a look (Reminder: Expo Go is still using the old 5.1.6 version of Lottie so please don't test this against Expo Go)