Error on bodymovin animation in react native?

Question

I am using sample.json image file which is for bodymovin animation in my page through Lottie for React Native.

I am getting the image but the image is not fully retrieved, some parts of the image is missing and also in some side of the image, green color pasted on the image.

But i checked the sample.json through online json image viewr. But there is no issue with the image from the source

here is issue https://i.sstatic.net/yFZfg.jpg

here is original image https://i.sstatic.net/4sBzg.jpg

so here is my code

 import React from 'react';
    import { Animated, Easing, easing  } from 'react-native';
    import Animation from 'lottie-react-native';

    export default class BasicExample extends React.Component {
       constructor(props) {
        super(props);
        this.state = {
         progress: new Animated.Value(0.5),
      };
    }

    componentDidMount() {
     this.startAnimation();
    }
    startAnimation() {
    Animated.timing(
      this.state.progress,
      {
      toValue: 1,
      from: 0,
      to: 1,
      duration: 5000,
      }
    )
    .start(() => {
       // Restart at end
       this.state.progress.setValue(0);
       this.startAnimation();
     });
    }
    render() {
       const easing = Easing.inOut(Easing.quad);
       const { Animate } = this.props;
      return (
          <Animation
             style={{
              width: 300,
              height: 300,
            }}
           source={this.props.Animate}
           progress={this.state.progress}
          />
         );
       }
     }

i installed lottie npm also.

so this is my issue please help me to overcome this Thanks in advance

Answer 1

UPDATE: Now that I looked your code closer I found out that you're animating by changing the value of progress prop. That's not how to do it. You need to use ref for referring the animation to.

return (
    <Animation
      ref={(animation) => this.myAnimation = animation}
      style={{
        width: 300,
        height: 300,
      }}
      source={this.props.Animate}
    />
);

And then:

componentDidMount() {
  this.startAnimation();
}

startAnimation() {
  this.myAnimation.play();
}

---

OLD ANSWER:

Your code seems perfectly legit and if you see an image, it proofs that you're doing it right.

I'd assume there's either something wrong with the JSON or then Lottie just interprets values wrong.

I've encountered small styling issues on Android devices, but not with iOS. And they're mostly related to alignment.

If you don't get any proper answers here in SO, I'd suggest you to file an issue to github (see this for instance: https://github.com/airbnb/lottie-react-native/issues/182)