Changing autoplay from false to true after mount does not start to play

[pke]

Description

I know its described in the docs, that the autoplay prop only affects the component on mount. In a full declarative way this is kind of unexpected and I had to read about it in the docs after I thought my code has a bug.

I wonder, is there a technical reason the prop can't be changed after the component has been mounted? Its already issuing a play command when the source is changed and autoplay===true. I know the name of the prop is autoplay and for my proposal the property better named playing.

The more declarative behaviour would probably no more then 3 lines of code, unless I am missing something?

componentDidUpdate(prevProps) {
  if (this.props.source.nm !== prevProps.source.nm && this.props.autoPlay) {
    this.play();
  }
  if (this.props.autoPlay != prevProps.autoPlay) {
    this.props.autoPlay ? this.play() : this.stop();
  }
 }

Steps to Reproduce

const [playing, setPlaying] = useState(false)

const onStartClick = useCallback(() {
  setPlaying(true)
}, [])

<LottieView ... autoplay={playing} />

Changing the playing var does not start to play the animation.

Expected behavior: [What you expected to happen]

Expected to animation to play.

Actual behavior: [What actually happened]

The animation was not played.

[HosAkh]

I'm running into this same issue but with a hook component. idk what is causing it either. I console.log the useState and uppon clicking it, it is turning true but the animation won't start playing

[solankiTejasHere]

Try changing the speed of LottieView using the setTimeout function.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.