CODEWITHSUNDEEP
react-nativelottie
BennKingy
BennKingy

Reputation: 1583

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

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')}
/>

Upvotes: 1

Views: 3167

Answers (1)

Rohit Khairnar
Rohit Khairnar

Reputation: 1331

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')}
/>

Upvotes: 2

Related Questions