react native parsing Lottie file into state?

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 ??

Cong Li · Accepted Answer · 2018-05-07T03:33:52.617

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

react native parsing Lottie file into state?

1 Answers1