React Native Lottie View Animation Play/Pause Issue

react native animation github
react native fireworks animation
react native lottie progress
lottie-react native expo
react native lottie splash screen
react native animated
lottie react speed
npmjs lottie react native

I'm using React Native Lottie Wrapper to show animation on screen. I need a functionality to play/pause/resume animation.

Here is my a part of my code:

...

constructor(props) {
  super(props);
  this.state = {
    progress: new Animated.Value(0)
  };
}

static navigationOptions = {
  title: "Details",
  headerStyle: {
    backgroundColor: '#f4511e',
  },
  headerTintColor: '#fff',
  headerTitleStyle: {
    fontWeight: 'bold',
  },
  headerTruncatedBackTitle: 'List'
};

componentDidMount() {
  this.animation.play();
}

playLottie() {
 console.log('play');
}

pauseLottie() {
  console.log('pause');
}

render() {
  return (
    <View>
      <Animation
        ref={animation => { this.animation = animation; }}
        source={require('../../../../assets/anim/balloons.json')}
        style={{height: 300, width: '100%'}}
        loop={false}
        progress={this.state.progress}
      />
      <Text>Course with id: {this.props.navigation.state.params.courseId}</Text>
        <Button 
          onPress={this.playLottie}
          title="Play Lottie"
          color="#841584"
          accessibilityLabel="Play video"
        />
        <Button 
          onPress={this.pauseLottie}
          title="Pause Lottie"
          color="#841584"
          accessibilityLabel="Pause video"
        />
     </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

...

The animation is playing well but I can't pause it and resume it. Does anyone have a solution for this problem?

P.S. I have tried to use this.animation in pauseLottie() method but it said that is undefined.

Thank you in advance!

You have to set the state from the play/pause functions. In order to access the state of the Component, you have to bind the function to the component class:

First option in your constructor:

constructor(props) {
  super(props);
  this.playLottie.bind(this);
  this.pauseLottie.bind(this);
}

or second option when declaring inside class use the es6 function syntax:

playLottie = () => {
 ...
}

pauseLottie = () => {
 ...
}

Inside those function call setState and add the value you want to set it to. In your case I would:

playLottie = () => {
  this.setState({ progress: true })
}

pauseLottie = () => {
  this.setState({ progress: false })
}

It is important you bind those two functions to your class component, because you will not be able to access component props. Thats why it is throwing you an error setState is not a function

Your render looks good ;)

I'm using React Native Lottie Wrapper to show animation on screen. I need a functionality to play/pause/resume animation. Here is my a part of my code:  Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

You can pause and play Lottie animation by changing the speed prop, where speed={0} puts LottieView component in pause and speed={1} plays it at normal speed.

Here is an example:

playAnimation = () => {
    this.setState({speed: 1})
}

pauseAnimation = () => {
    this.setState({speed: 0})
}

<LottieView
    source={this.state.sourceAnimation}
    speed={this.state.speed} />

Description When animation loops it pauses before looping. Steps to Reproduce Here is my class for autoplay lottie animations: export this.animation.play(); // } render() { return( <LottieView ref={ animation **Expected behavior:**I expect when looping there should be a continuous loop with no pause. Animation works differently on mobile than on the web (lottie preview) #616 opened Feb 26, 2020 by roruva Some frames cut off in react-native ios

for me it didn't work well: we have to add setValue(0), then we need to improve pause/restart to maintain the playing speed and change easing function to avoid slow re-start. Let's also add looping:

constructor(props) {
  super(props);
  this.playLottie.bind(this);
  this.pauseLottie.bind(this);
  this.state = {
    progress: new Animated.Value(0),
    pausedProgress: 0
  };
}

playLottie = () => {
  Animated.timing(this.state.progress, {
    toValue: 1,
    duration: (10000 * (1 - this.state.pausedProgress)),
    easing: Easing.linear,
  }).start((value) => { 
    if (value.finished) this.restartAnimation();
  });
}

restartAnimation = () => {
  this.state.progress.setValue(0);
  this.setState({ pausedProgress: 0 });
  this.playAnimation();
}

pauseLottie = () => {
  this.state.progress.stopAnimation(this.realProgress);
}

realProgress = (value) => {
  console.log(value);
  this.setState({ pausedProgress: value });
};
...

(Now) For me, it's working fine! Play and pause option work as expected.

Description Animation is stopped after app has entered background state. This seems to mainly be a problem on iOS, on Android I was not able to of n animations inside the component in order to play() them again when the app X : null // See https://github.com/react-native-community/lottie-react-native/  I'm closing this issue as @li-yuan2 PR has been merged into master now and should be out with the next release of lottie-react-native emilioicai closed this Dec 18, 2018 This comment has been minimized.

You can help us out by using the "report an issue" button at the These will hold or React components and Lottie animation data respectively. In our case, we'll look at how we can play, stop, and pause the animations in our lottie. to use now, so let's import them into App.js and display them in our app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. Airbnb You can read and explore more about Lottie from its official page .

Lottie. Render After Effects animations natively on Web, Android and iOS, and React Native. Animation View documentation, FAQ, help, examples, and more at airbnb.io/lottie It returns the animation instance you can control with play, pause, setSpeed, etc. lottie. It's useful when you experience mask issues in Safari. It seems the issue is with bodymovin version, but how will I find a version that is working? How can I solve this? Steps to Reproduce. yarn add lottie-react-native@2.6.1; react-native link lottie-react-native; Add the code in the description. react-native run-android; Expected behavior: App to work with my animation. Actual behavior:

Lottie is a library for mobile devices that offers for the team a And for React Native there is native component solution as Animated I'll keep this paragraph as a guidance for developers facing the same issue. Now, there's a small difference when compared to native Animated API: it's .play() , not .start()  react-native-community / lottie-react-native. Code Issues 55 Pull requests 4 Actions Projects 0 Security Insights. Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Lottie wrapper for React Native. bodymovin animations react-native after

Comments
  • In play and pause put setState({ progress: true }) or false.
  • it said that this.setState is undefined.
  • I set on button onPress={() => this.pauseLottie} and the error has gone but the animation is not pausing.
  • I posted an answer have a look.
  • thank you for your answer but progress true\false are not valid values. It can only be number.
  • I will try that.