I am trying to port my aftereffects animation exported to json with bodymovin plugin to React native. I am using Lottie https://airbnb.design/lottie/
My problem is while bodymovin spits out an images folder with the images used in animation AND the .json file, Lottie is only displaying the parts of the animation where the vectors had been converted to shapes. The background, everything else not displayed.
I have followed their example:
export default class BasicExample extends React.Component {
constructor(props) {
super(props);
this.state = {
progress: new Animated.Value(0),
};
}
componentDidMount() {
Animated.timing(this.state.progress, {
toValue: 1,
duration: 5000,
}).start();
}
render() {
return (
<Animation
style={{
width: 200,
height: 200,
}}
source={require('../path/to/animation.json')}
progress={this.state.progress}
/>
);
}
}
But only shapes show up. How can I have the images be animated also? Is this possible?