React Native 如何使用 Lottie JSON 文件？

Question

Hey guys I want to use Lottie with React Native to show a glas of water that gets filled up.

I found some ready Lottie files that look pretty good and I wanted to use them inside my app.

I installed Lottie and linked it (with rn-link and I tried it manually..).

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.

I am even using the official code that is taken from Lottie Docs ( https://airbnb.io/lottie/#/react-native )

I tried it with 2 different animations (1: https://lottiefiles.com/15421-glass-of-water , 2: https://lottiefiles.com/5922-water-loading?lang=de ) - they are in my assets folder and inside the android/assets folder also!

Here is the 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 (
          <LottieView source={require('../assets/Lottiewater.json')} progress={this.state.progress} />
          <LottieView source={LottieGlas} progress={this.state.progress} autoSize />
        );
      }
    }


    // 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 (
      <LottieView
        ref={animation => {
          this.animation = animation;
        }}
            // source={require('../assets/Lottiewater.json')}
            source={Lottiewater}
          />
        );
      }
    }

Answer 1

Okay so I fixxed it - for me the issue was that I did not build the app again. So closing the emulator and restarting Android Studio to rebuild fixxed it for me.