Why isn't my Lottie animation showing in my React-native app?

Question

I have a react-native view which has a Lottie animation in it, but the animation doesn't show at all, the screen is just yellow (background color of the enclosing view).

Here is my code:

import React, { Component } from 'react';
import {
  StyleSheet,
  View, 
} from 'react-native';
import LottieView from 'lottie-react-native';

export default class Splash extends Component {
  constructor(props) {
    super(props);
  }
    
  static navigationOptions = {
    header: null,
  };
    
  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'yellow'}}>
        <LottieView
          style={{flex: 1}}
          source={require('../check.json')}
          autoPlay
          loop
        />
      </View>
    );
  }
}

Answer 1

I added

style={{flex:1}}

to LottieView

and it was fine.

Answer 2

I tried out the Lottie file that you provided and it does work.

Here is the code that I used in my App.js to get it working.

import React, {Component} from 'react';
import {Platform, StyleSheet, View} from 'react-native';
import LottieView from 'lottie-react-native';

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <LottieView
          style={{flex: 1}}
          source={require('./check.json')} {/* I think your issue is that you have the wrong path for your lottie file*/}
          autoPlay
          loop
        />
      </View>
    );
  }
}

Note in my project my App.js and my check.json are in the same folder.

Here is a picture of it working