Fix for https://github.com/felippenardi/lottie-react-web/issues/24

src/index.js

@@ -210,7 +210,10 @@ Lottie.propTypes = {
   ariaRole: PropTypes.string,
   ariaLabel: PropTypes.string,
   title: PropTypes.string,
-  style: PropTypes.string,
+  style: PropTypes.objectOf(PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ])),
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 

src/stories/StyledLottie.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import Lottie from '../index';
+import * as animationData from './TwitterHeart.json';
+
+export default class StyledLottie extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      transformInput: 0,
+      opacityInput: 100,
+      styles: {},
+    };
+  }
+
+  handleStyleChanges(cssProperty) {
+    this.setState(prev => ({
+      ...prev,
+      styles: {
+        ...prev.styles,
+        [cssProperty.name]: cssProperty.value,
+      },
+    }));
+  }
+
+  render() {
+    const centerStyle = {
+      display: 'block',
+      margin: '10px auto',
+      textAlign: 'center',
+    };
+    const { transformInput, opacityInput } = this.state;
+    const defaultOptions = { animationData };
+
+    return (<div>
+      <Lottie
+        options={defaultOptions}
+        height={400}
+        width={400}
+        style={this.state.styles}
+      />
+
+      <p style={centerStyle}>Rotate: {transformInput}°</p>
+      <input
+        style={centerStyle}
+        type="range" value={transformInput} min="0" max="360" step="5"
+        onChange={(e) => {
+          this.setState({ transformInput: e.currentTarget.value });
+          this.handleStyleChanges({ name: 'transform', value: `rotate(${e.currentTarget.value}deg)` });
+        }}
+      />
+      <p style={centerStyle}>Opacity: {opacityInput}</p>
+      <input
+        style={centerStyle}
+        type="range" value={opacityInput} min="0" max="100" step="10"
+        onChange={(e) => {
+          this.setState({ opacityInput: +e.currentTarget.value });
+          this.handleStyleChanges({ name: 'opacity', value: +e.currentTarget.value / 100 });
+        }}
+      />
+    </div>);
+  }
+}

src/stories/index.js

@@ -5,10 +5,12 @@ import LottieControlSegments from './lottie-control-segments';
 import ToggleLike from './toggle-like';
 import TransitionLoop from './TransitionLoop';
 import TransitionWithOptions from './TransitionWithOptions';
+import StyledLottie from './StyledLottie';
 
 storiesOf('Lottie Animation View', module)
   .add('with control', () => <LottieControl />)
   .add('toggle like', () => <ToggleLike />)
   .add('transitions & loops', () => <TransitionLoop />)
   .add('transitions with options', () => <TransitionWithOptions />)
-  .add('with segments', () => <LottieControlSegments />);
+  .add('with segments', () => <LottieControlSegments />)
+  .add('styling', () => <StyledLottie />);