Loop animation property about lottie-react-native HOT 10 CLOSED

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();
    }
  }

from lottie-react-native.

@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"

from lottie-react-native.

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

This seems to work even better

from lottie-react-native.

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.

from lottie-react-native.

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

from lottie-react-native.

Great idea.

from lottie-react-native.

Nice, works great 👍

from lottie-react-native.

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

from lottie-react-native.

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

from lottie-react-native.

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

from lottie-react-native.