Hot questions for Using Lottie in jsx

Question:

I would like to run the animation when my component receives an updated prop.

Sample code:

import React from 'react';
import Animation from 'lottie-react-native';

export default class BasicExample extends React.Component {
  componentDidMount() {
// This works
if(this.props.displayAnimation)
    this.animation.play();
  }

  componentWillReceiveProps(nextProps) {
      console.log("Component will receive new prop")
      if(nextProps.displayAnimation){
         this.animation.play();
      }
   }

  render() {
    return (
      <Animation
        ref={animation => { this.animation = animation; }}
        style={{
          width: 200,
          height: 200,
        }}
        source={require('../path/to/animation.json')}
      />
    );
  }
}

So the this.animation.play(); on the componentWillReceiveProps doesnot works. Based on several documents i read realised this is probably not the right way since the this on componentWillReceiveProps is different from this on componentDidMount

I tried passing a state to force update the component but React wont update the Animation component.

Suggestion on how to make the animation play on componentWillReceiveProps


Answer:

Try that in componentDidUpdateinstead.

Question:

I am trying to implement Lottie animation into my app, i am using expo SDK, so i followed the documentation on expo,

_loadAnimationAsync = async () => {
let result = await fetch(
  'https://cdn.rawgit.com/airbnb/lottie-react-native/635163550b9689529bfffb77e489e4174516f1c0/example/animations/Watermelon.json'
);

this.setState(
  { animation: JSON.parse(result._bodyText) },
  this._playAnimation
);

};

i got an [Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "undefined"].

is it result ._bodyText who is empty or undefined ??


Answer:

I just meet the same issue and fixed.

modify _loadAnimationAsync should get it work.

_loadAnimationAsync = async () => {
let result = await fetch(
  'https://cdn.rawgit.com/airbnb/lottie-react-native/635163550b9689529bfffb77e489e4174516f1c0/example/animations/Watermelon.json'
)
  .then(data => {
    return data.json();
  })
  .catch(error => {
    console.error(error);
  });
this.setState({ animation: result }, this._playAnimation);
};

I also start a pr for this issue if you are interested. here