Loop prop isnt working

[baires]

I have a very simple view as you can see:

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  animationContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column',
  },
  animation: {
    width: 400,
    height: 400,
  },
});

export default class Loading extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: new Animated.Value(0),
    };
  }

  componentDidMount() {
    Animated.timing(this.state.progress, {
      toValue: 1,
      duration: 5000,
    }).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.animationContainer}>
          <Animation
            style={styles.animation}
          // eslint-disable-next-line global-require
            source={require('./animation.json')}
            progress={this.state.progress}
            loop
          />
        </View>
      </View>
    );
  }
}

Im just trying to loop the animation, but no luck so far. Not sure if this is RN issue o lottie for iOS.

Im on

react-native-cli: 1.0.0
react-native: 0.40.0
``

[indivisable]

It works for me when using the imperative API

import React from 'react';
import Animation from 'lottie-react-native';

export default class BasicExample extends React.Component {
  componentDidMount() {
    this.animation.play();
  }

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

[baires]

I didn't try the imperative API, just pointing that looping on the component API isn't working

[lelandrichardson]

At the moment loop is only applicable to the imperative API. I'm not quite sure how it would work with the Animated API, since the animation progress is controlled by an animated value (which you would be able to loop yourself if you wanted, though it's not straight-forward).

I'm happy to take suggestions on how this could/should work

[baires]

If there was a callback when the animation ends something like onAnimationComplete we can reset the animation again.

[lelandrichardson]

if you're using the Animated API, this callback already exists. You would animate from 0 -> 1, and then reset

[lelandrichardson]

Though, I do think that the Animated API could use a loop API. I know I had talked to vjeux about this at some point. Perhaps it's time to make a PR

[baires]

Sounds good, thanks for your feedback!