Loop animation property

[eneskaya]

First of all: 👍 👍 👍

Would be nice to have a convenient way of starting looped animations! So not only calling play() but also loop()

[lelandrichardson]

Great idea.

[eneskaya]

Nice, works great 👍

[femontanha]

@eneskaya do you know how I do a loop? I tried to add this loop property but doesn't work

<Animation
  source={ json }
  progress={ this.state.progress }
  loop={ true }
/>

[eneskaya]

@femontanha It only works with the imperative API, so be sure NOT to use progress prop. Instead do something like this:

...

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

render() {
    <Animation
        source={json}
        style={{width: 100, height: 100}}
        ref={(animation) => this.animation = animation} // the ref to the LottieAnimation component 
        loop
    />
}

[xeroxoid]

@eneskaya can you please post the whole snippet. I cant seem to figure out how you referenced initialized the animation.

[eneskaya]

@xeroxoid what do you mean, how I initialized the animation? (sorry for late reply)

[saddacracker]

Echoing @xeroxoid. I get a reference error when I use the imperative API.

undefined is not an object (evaluating 'this.animation.start')

Turns out the Animation is not initialized when the componentDidMount is run so I used a timer. Definitely open to suggestions.

  componentDidMount() {
      this.initAnimation();
  }

  initAnimation(){
    if (!this.animation){
      setTimeout(() => {
        this.initAnimation();
      }, 100);
    } else {
        this.animation.play();
    }
  }

[agrosner]

 <Animation
   loop
   source={source}
   ref={(animation) => animation.play()}
 />

This seems to work even better

[mjsisley]

Thoughts on allowing loop to take a number as an option?

For cases where you want the animation to loop some amount of times less than infinity.

[matthieupinte]

@agrosner is working but need to add a check (plz don’t ask me why ^^) :

<Animation
  loop
  source={source}
  ref={animation => {
    if (animation) animation.play()
  }}
/>

"lottie-react-native": "^2.2.7"