How to add starting animation delay to lottie-react-native

February 2, 2023

This is my component and I want the animation to start 0.5s after the page has been landed on. How can I achieve this?

No props for delay here:
https://github.com/lottie-react-native/lottie-react-native/

<Lottie
  style={[
    {
      position: 'relative',
      height: 160,
      width: 160,
    },
    spacing.gbMt1,
  ]}
  autoPlay={true}
  loop={false}
  source={require('../assets/lottie/Coach001.json')}
/>

>Solution :

There is no prop for adding time delay but you can use these API methods to play, pause, resume and reset animation. You will need to set autoplay to false and call "play" method in timeout of 5 seconds to achieve the required delay.

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

<Lottie
  ref={ref}
  style={[
    {
      position: 'relative',
      height: 160,
      width: 160,
    },
    spacing.gbMt1,
  ]}
  autoPlay={false}
  loop={false}
  source={require('../assets/lottie/Coach001.json')}
/>