Lottie animations starts playing when layer that contains it is clicked, how to stop this?

Question

I've got a lottie animation that I trigger from a parent component, the problem is that for some reason the entire lottie component layer is clickable and initiates the animation.

This is the code code that I'm using:

constructor(props) {
    super(props);
    this.state = {
      isStopped: true,
      isPaused: false,
      Animated: 0,
    };
    this.defaultOptions = {
      loop: false,
      autoplay: false,
      animationData: animationData
    };
  }

  clickHandler = () => {
    this.setState({ 
        isStopped: false,
        Animated: 0
    });
    console.log("clicked");
  };

  render() {
    return (
      <div id="ethdrop">
        <Lottie
          className='animation-class'
          options={this.defaultOptions}
          isStopped={this.state.isStopped}
          isPaused={this.state.isPaused}
          Animated={this.state.Animated}  
        />
    </div>
    );
  }

This is how the dom looks like:

I can't find anything that might be triggering this if any of you have any idea please let me know.

Answer 1

There is an undocumented property: isClickToPauseDisabled. When this is set to false (which is the default value), you can pause and resume your animation by clicking on it. If you don't want this to happen, set this property to true.

Example:

<Lottie options={this.defaultOptions}
    ...
    isClickToPauseDisabled={true} 
/>

Reference: https://github.com/chenqingspring/react-lottie/pull/54