JSON format of SVG inside React Component - json

Question

I used bodymovin extension of AfterEffects to create an animation and export it as a JSON that is compatible for the web. I tried following this walk-through to figure out how to include it inside a component: https://gist.github.com/prettyhandsome/caa7386dcda76fde28cf5d2a07a12082#file-devmyndshapes-jsx
However, I had no luck. Is there a good, step by step resource online for how to include JSON as an image inside a React component? Here is my failed attempt:
import React, { Component } from 'react';
import Plx from 'react-plx';
import PropTypes from 'prop-types';
import bodymovin from 'bodymovin';
import animationData from '../../animations/test.json';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { skyChange } from './redux/actions';
export class Home extends Component {
static propTypes = {
home: PropTypes.object.isRequired,
actions: PropTypes.object.isRequired,
};
componentDidMount() {
this.attachAnimation();
}
animationIsAttached = false;
const animationProperties = {
//the is the DOM element that you would like to attach your animation to
container: this.animationContainer,
//the renderer options are svg, canvas, or html
renderer: 'svg',
//true plays the animation in a continuous loop
loop: true,
//true plays the animation when the view loads
autoplay: true,
//the JSON data, which we imported above
animationData: animationData
}
attachAnimation = () => {
if (this.animationContainer !== undefined && !this.animationIsAttached) {
const animationProperties = {
container: this.animationContainer,
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData
}
bodymovin.loadAnimation(animationProperties);
}
}
render() {
const { skyState, splashState } = this.props.home;
const { skyChange } = this.props.actions;
return (
<div className="testing-animation">
<h1> Animation Attempt </h1>
<div style={{width: 50, height: 50}} ref={(animationDiv) => { this.animationContainer = animationDiv; }}/>
</div>
</div>
);
}
}
/* istanbul ignore next */
function mapStateToProps(state) {
return {
home: state.home,
};
}
/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ skyChange }, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Home);

Answer 1

Replace the code -
animationData: animationData
to
animationData: animationData.default