CODEWITHSUNDEEP
react-nativelottie
leesinmaster
leesinmaster

Reputation: 91

How to re-play Lottie animation in React Native

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
/>

Upvotes: 1

Views: 4559

Answers (2)

fxdxpz
fxdxpz

Reputation: 1989

Had same issue recently. If you don't want to use ref approach you can use old trick of setting key property on the LottieView which should be related to the source so when that source is changing key property will receive a new value and React will re-render it, e.g.

<LottieView
    // other props you might need
    key={item.id}
    source={item.lottie}
/>

Upvotes: 1

ZealousWeb
ZealousWeb

Reputation: 1751

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

Upvotes: 0

Related Questions