react-nativereact-native-sound

React Native Lottie: Cannot read property 'play' of undefined


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.


Solution

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