Release Lottie File on unmount

[NicholasNations]

I am running quite a few Lottie Animations in my app and every time it runs, the animation never releases. Is there a way to clear the local memory after running the animation? At least the current animation. My memory get's up to 2gbs pretty fast. I am running animations all over the app and every time I unmount and come back, it adds the same animation into the memory. I start at 470 mbs, then I see an animation, i have 500 mbs, then I leave, it stays at 500 mbs, then I come back to the same animation page and it goes up to 530 mbs. Unmounting the component seems to make it stick in the internal memory. Any information as to why why the animation never releases and how to release it would be greatly appreciated.

Here is a component that is never released from memory: <LottieView style={{height: '100%', width: '100%'}} source={source} ref={animation} enableMergePathsAndroidForKitKatAndAbove autoPlay />

[taneba]

I was facing the similar issue, and in my case it was solve by running reset when component unmounts. I created a helper hook that can start animation on mount and reset on unmount:

export function useLottieAnim() {
  const animation = useRef<LottieView>(null)

  useEffect(() => {
    if (animation.current) {
      animation.current.play()
    }
    return () => {
      animation.current && animation.current.reset()
    }
  }, [])

  return animation
}

// usage
const animation = useLottieAnim()

<LottieView
 source={source}
 ref={animation}
/>

[wanderSX]

@NicholasNations Did the solution above help you, because it did not for me. Could it be because i have a dynamic source?

[MorenoMdz]

@NicholasNations Did the solution above help you, because it did not for me. Could it be because i have a dynamic source?

If you are using React Navigation this may help:

import { useRef, useCallback } from 'react'
import { useFocusEffect } from '@react-navigation/native'
import LottieView from 'lottie-react-native'

export function useLottieAnim() {
  const animation = useRef<LottieView>(null)

  useFocusEffect(
    useCallback(() => {
      if (animation.current) {
        animation.current.play()
      }
      return () => {
        animation.current && animation.current.reset()
      }
    }, []),
  )

  return animation
}

[jogoool]

same issue here, reset is not helping.

[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.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[nikitph]

This is a critical bug. The reset does help but this needs to be addressed natively

[longnc100500]

same issue

[keselme90]

@longnc100500 @nikitph Did you guys find a solution?

[nikitph]

I m manually releasing the resources by doing a reset. Seems to work well. I will send an example.

On Wed, 1 Feb 2023 at 6:41 PM, keselme90 @.***> wrote:

@longnc100500 https://github.com/longnc100500 @nikitph https://github.com/nikitph Did you guys found a solution?

— Reply to this email directly, view it on GitHub https://github.com/lottie-react-native/lottie-react-native/issues/676#issuecomment-1412034627, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABGGUB4AOYN5A7UZRIHAL6TWVJOGHANCNFSM4QGXPY3Q . You are receiving this because you were mentioned.Message ID: @.***>

[nikitph]

useFocusEffect( useCallback(() => { if (animation.current) { animation.current.play(); } return () => { animation.current && animation.current.reset(); }; }, []), );

[nikitph]

this will help u get back the ram after the animation finishes and u nav out but the issue still needs to be addressed in terms of better ram use

[pSapien]

Not sure why this issue has been closed, it still persists. I have raised another issue for this https://github.com/lottie-react-native/lottie-react-native/issues/1010

[matinzd]

Same here: https://github.com/lottie-react-native/lottie-react-native/issues/1010

[matinzd]

Fixed by https://github.com/lottie-react-native/lottie-react-native/pull/1055.