animation reset to first frame when app resume from background

[sbin1211]

Description

at ios, after animation finished, when app goto background then resume, the animation reset to first frame not end of frame. this issue accure at 5.0.0, 5.0.1, it's ok before 5.0.0

Steps to Reproduce

https://user-images.githubusercontent.com/22540308/145149332-3ff9113d-c39a-4d73-8f58-58ea9c779c83.mp4

Expected behavior: animation should stay at last of frame.

Actual behavior: animation reset to first frame.

Versions

[email protected] [email protected] system

[sbin1211]

@emilioicai could you have a look. thanks.

[nathanlevitt]

This is happening to mine as well, along with looped animations causing the frame to freeze when app resumes from background.

[kieranoreilly]

Having same issue :')

[kyang6]

Same here, any insights?

[kyang6]

https://github.com/lottie-react-native/lottie-react-native/issues/412 I think related to this issue from a while back

[Livijn]

I have the same problem. My workaround looks like this:

  useEffect(() => {
    AppState.addEventListener('change', handleAppStateChange);

    return () => {
      AppState.removeEventListener('change', handleAppStateChange);
    };
  }, []);

  function handleAppStateChange(nextAppState: AppStateStatus) {
    if (nextAppState === 'active') {
      lottieRef.current!.play(75, 75);
    }
  }

[cam-shaw]

Happening for us on iOS, 5.0.1

[dan-betmate]

Hello, this is also happening for us. Android is fine.

We're just upgraded to: "react-native": "0.66.4", "lottie-ios": "3.2.3", "lottie-react-native": "5.0.1",

It's only happened with the upgrade but we can't downgrade from RN66 and lottie-react-native installation instructions specify these lottie packages for RN66

@Livijn solution worked a treat for us, we made one amendment though as we were getting a warning Property 'remove' does not exist on type 'AppStateStatic' and so went with

    const subscription = AppState.addEventListener('change', handleAppStateChange);

    return () => {
      return subscription.remove()
    };
  }, []);

Everything else was the same though.

[branoholy]

I had the same issue and the workaround from @Livijn didn't solve it completely. The animation blinked from the first frame to the last frame. Specifying the property progress={1} helped in my case. Fortunately, autoPlay still works as expected. I use these properties.

<LottieView
  source={require('...')}
  autoPlay
  progress={1}
  loop={false}
/>

[Livijn]

@branoholy Actually, it seems that setting progress={1} worked. 😮

[franckmaurin]

Hi, I'm facing the same bug currently. Do you have some news about it ? progress={1} isn't work for me.

[MiteshKalal7]

@Livijn Thanks

const lottieRef = useRef();

useEffect(() => {
    const sub = AppState.addEventListener("change", handleAppStateChange);

    return () => sub.remove();
  }, []);

  const handleAppStateChange = (nextAppState) => {
    if (nextAppState === "active" && lottieRef.current) {
      lottieRef.current.play();
    }
  };
  
   <LottieView
          ref={lottieRef}
          source={require("./../assets/json/update1.json")}
          autoPlay
          loop
     />

[stale[bot]]

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.

[ronaldcurtis]

Commenting to keep this open, as it is still occurring.

[nikitph]

I have the same problem. My workaround looks like this:

  useEffect(() => {
    AppState.addEventListener('change', handleAppStateChange);

    return () => {
      AppState.removeEventListener('change', handleAppStateChange);
    };
  }, []);

  function handleAppStateChange(nextAppState: AppStateStatus) {
    if (nextAppState === 'active') {
      lottieRef.current!.play(75, 75);
    }
  }

this is working

[laffed]

Bump

[vishal-nykaa]

I am facing same issue in android whenever the animation is not visible it doesn't gets completed, i want to get my animation running in background and unable to find any solution for this in Android, can some one please help

[as4]

bump

[FlushNorris]

bump

[FlushNorris]

Should be possible to set animationView.backgroundBehavior = .pauseAndRestore on lottie-ios via swift, must be possible via react-native as well?! https://github.com/airbnb/lottie-ios/issues/1332

[matinzd]

Try updating to the latest version, as it is fixed in thie PR. Please reopen the issue if the problem persists.

[as4]

It's not fixed in 5.1.4 (the latest version at the moment). Our animations reset when the app goes to background.

[matinzd]

Fixed in https://github.com/lottie-react-native/lottie-react-native/pull/980.

[lpatrun]

@matinzd when will you make the new version?

[matinzd]

@matinzd when will you make the new version?

Waiting for @emilioicai to approve release script PR. The new release will be under rc tag. Should be out soon.

[eliasljubec]

Same issue for me in version 5.1.5 🤔

[matinzd]

Changes are not on the stable branch. Please test it on @next and let us know. @eljubec