I'm using the Lottie imperative API to display a looping animation.
The imperative API works fine on all of my components except one that uses React Native Sound. I assume the problem is that both libraries are called with .play()
. Is this possible?
Lottie: this.animation.play();
React Native Sound: this.sound.play()
After calling the Lottie method, I'm getting the Error Message:
Cannot read property 'play' of undefined
Any Ideas?
Thanks in advance.
I eventually figured it out. React Native Sound of course wasn't the problem - it might have just delayed the initialization of Lottie and thus animation
was still undefined when I called it.
The solution is to build in a timer and was already suggested in this thread: https://github.com/airbnb/lottie-react-native/issues/21
componentDidMount() {
this.initAnimation();
}
initAnimation(){
if (!this.animation){
setTimeout(() => {
this.initAnimation();
}, 100);
} else {
this.animation.play();
}
}