How to re-play Lottie animation in React Native

Question

I'm trying to use 'react-native-app-intro-slider' with Lottie animations.

It works well, but when I click Back or Next button, the animation stops playing.

How can I re-play the animations?

Thanks in advance!

const renderItem = ({ item }) => {
  return (
    <View style={styles.container}> 
      <LottieView
        ref={LottieRef}
        autoPlay
        loop
        source={item.lottie}
      />
    </View>
  </ImageBackground>
)}

const slideChange = () => {
  LottieRef.current.play(); // it doesn't work
}

useEffect(() => {
  if (LottieRef.current !== null) {
    LottieRef.current.play(); // it doesn't work
  }
}, [LottieRef])

...

<AppIntroSlider 
   renderItem={renderItem} 
   data={slides} 
   onDone={onDone}
   onSlideChange={slideChange}
   showSkipButton
   showPrevButton
/>

I've tried to re-create this, but with loop and autoplay set to true, the animations keeps repeating as expected. snack.expo.io/@nipuna777/app-intro-slider-with-lottie Are there additional changes required? — nipuna777
@nipuna777 thanks for the reply. What I wanted to ask was the animations didn't keep repeating when I click 'back' button (or swipe to the left). With my device(android), the same thing happens in your Snack (animation works well but does not work for previous slider pages) — leesinmaster
Hmm that looks like a bug. I bumped up to the latest version and that fixes the issue on iOS. But to fix it on Android, I had to force a re-render on slide change. You can look at the updated snack to see if that's a workable solution for you. — nipuna777
@nipuna777 wow it works perfect! Thank you so much you are a genius! — leesinmaster

ZealousWeb ZealousWeb · Accepted Answer · 2021-02-15T08:03:34

You need to add the .play() to componentDidMount or in useEffect in order to play the animation on each component mount.

You could do something similar to this

import React from 'react';
import LottieView from 'lottie-react-native';
 
export default class BasicExample extends React.Component {
  componentDidMount() {
    this.animation.play();
    // Or set a specific startFrame and endFrame with:
    this.animation.play(30, 120);
  }
 
  render() {
    return (
      <LottieView
        ref={animation => {
          this.animation = animation;
        }}
        source={require('../path/to/animation.json')}
      />
    );
  }
}

How to re-play Lottie animation in React Native

1 Answers