Lottie-react-native: What's the difference between Component API and Imperative API?

Created on 15 May 2018 · 4Comments · Source: lottie-react-native/lottie-react-native

I'm new to lottie and can someone tell me the difference between Component API and Imperative API? I have been looking for something useful on the Internet for a long time but failed. Thanks a lot!

Source

ASkyBig

Most helpful comment

The component api allows you to "declare" what you want to do and lottie does it. For example, you want to automatically start playing the animation and not loop once the animation completes.

class Component extends React.Component {
  render() {
    return <LottieView source={someSource} autoPlay={true} loop={false} />'
  }
}

Effectively, you indicate what you want to do by setting the properties of the component.

The imperative API allows you to control the animation when certain events happen (and you don't want to rerender the component. This control is via the play and reset methods provided as part of the lottie view. To do anything useful with this, you will need a reference to the view.

For example:

class Component extends React.Component {
  render() {
    return <LottieView ref={r => (this.myAnimationView = r)} source={someSource} />'
  }

  componentWillUnmount() {
    if (this.myAnimationView) this.myAnimationView.reset(); // this stops the animation if it was playing
  }

  handleSomeEvent() { // something called this... maybe you had a button as part of your render
    if (this.myAnimationView) {
      this.myAnimationView.play(); // this starts playing the animation.
    }
  }
}

Hope this clears out the difference between the two.

rodrigoelp on 4 Oct 2018

👍3

All 4 comments

The component api allows you to "declare" what you want to do and lottie does it. For example, you want to automatically start playing the animation and not loop once the animation completes.

class Component extends React.Component {
  render() {
    return <LottieView source={someSource} autoPlay={true} loop={false} />'
  }
}

Effectively, you indicate what you want to do by setting the properties of the component.

For example:

class Component extends React.Component {
  render() {
    return <LottieView ref={r => (this.myAnimationView = r)} source={someSource} />'
  }

  componentWillUnmount() {
    if (this.myAnimationView) this.myAnimationView.reset(); // this stops the animation if it was playing
  }

  handleSomeEvent() { // something called this... maybe you had a button as part of your render
    if (this.myAnimationView) {
      this.myAnimationView.play(); // this starts playing the animation.
    }
  }
}

Hope this clears out the difference between the two.

rodrigoelp on 4 Oct 2018

👍3

By the way @emilioicai, I think this issue should be close as it is not an issue.

rodrigoelp on 5 Oct 2018

👍1

@rodrigoelp that's right, thanks for the heads up