title: React Native How to use Lottie JSON file?
body: <p>Hey guys I want to use Lottie with React Native to show a glas of water that gets filled up.</p>
  
  <p>I found some ready Lottie files that look pretty good and I wanted to use them inside my app.</p>
  
  <p>I installed Lottie and linked it (with rn-link and I tried it manually..). </p>
  
  <p>I had an Error showing that stated TypeError: Cannot read property "Commands" of undefined. - but after changing the source it disapeared. The problem I have now is that it is only showing me a white screen and nothing is happening.</p>
  
  <p>I am even using the official code that is taken from Lottie Docs (<a href="https://airbnb.io/lottie/#/react-native" rel="nofollow noreferrer">https://airbnb.io/lottie/#/react-native</a>) </p>
  
  <p>I tried it with 2 different animations (1: <a href="https://lottiefiles.com/15421-glass-of-water" rel="nofollow noreferrer">https://lottiefiles.com/15421-glass-of-water</a> , 2: <a href="https://lottiefiles.com/5922-water-loading?lang=de" rel="nofollow noreferrer">https://lottiefiles.com/5922-water-loading?lang=de</a> ) - they are in my assets folder and inside the android/assets folder also! </p>
  
  <p>Here is the code: </p>
  
  <pre><code>    import React from 'react';
      import { Animated, Easing } from 'react-native';
      import LottieView from 'lottie-react-native';
  
  import Lottiewater from "../assets/Lottiewater.json";
  import LottieGlas from "../assets/5922-water-loading.json"
  
      export default class Water extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            progress: new Animated.Value(0),
          };
        }
  
        componentDidMount() {
          Animated.timing(this.state.progress, {
            toValue: 1,
            duration: 5000,
            easing: Easing.linear,
            useNativeDriver: true
          }).start();
        }
  
        render() {
          return (
            &lt;LottieView source={require('../assets/Lottiewater.json')} progress={this.state.progress} /&gt;
            &lt;LottieView source={LottieGlas} progress={this.state.progress} autoSize /&gt;
          );
        }
      }
  
  
      // OR the code below! 
  
  
  
  import Lottiewater from "../assets/Lottiewater.json";
  import LottieGlas from "../assets/5922-water-loading.json"
  
  import React from 'react';
  import LottieView from 'lottie-react-native';
  
  export default class Water extends React.Component {
    componentDidMount() {
      this.animation.play();
      // Or set a specific startFrame and endFrame with:
      // this.animation.play(30, 120);
    }
  
    render() {
      return (
        &lt;LottieView
          ref={animation =&gt; {
            this.animation = animation;
          }}
              // source={require('../assets/Lottiewater.json')}
              source={Lottiewater}
            /&gt;
          );
        }
      }
  </code></pre>