Lottie-react-native: Feature request: Play in reverse

[AWrightIV]

The API does not yet include an option to play in reverse. This would enable reuse of animations instead of being required to export a reversed version of the same animation through Bodymovin.

[jozan]

You can play it reversed by animating the progress value to go from 1 to 0.

import React from 'react';
import { Animated } from 'react-native';
import Animation from 'lottie-react-native';

export default class BasicExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: new Animated.Value(1), // <-- Start from the end of animation
    };
  }

  componentDidMount() {
    Animated.timing(this.state.progress, {
      toValue: 0, // <-- Animate to the beginning of animation
      duration: 5000,
    }).start();
  }

  render() {
    return (
      <Animation
        style={{
          width: 200,
          height: 200,
        }}
        source={require('../path/to/animation.json')}
        progress={this.state.progress}
      />
    );
  }
}

[gpeal]

@AWrightIV You can also set the speed to a negative value.

[PabloNicolaas]

@gpeal I was looking into this and i noticed that setting speed to negative does nothing on ios is this a bug? on android it works perfectly btw