Lottie Animation not appearing on iOS simulator

Question

I am trying to use Lottie in my RN app. I followed the documentation, downloaded the JSON file, created a folder within RN to store that JSON and it is not working. I also did a "pod install" inside of my iOS folder. The app does not break, I just get a white image on the screen and the header. Anybody know what could possible be going wrong? I have not touched podfile, so I am wondering if that might be it?

This is the folder for the heart animation.

//HeartAnimation.js
    import React, { Component } from "react";
    import { View, StyleSheet } from "react-native";
    import LottieView from "lottie-react-native";
    import task from "./task.json";
    class HeartAnimation extends React.Component {
      static navigationOptions = {
        title: "The Simpsons",
        headerStyle: {
          backgroundColor: "#53b4e6"
        },
        headerTintColor: "#f6c945",
        headerTitleStyle: {
          fontWeight: "bold"
        }
      };
      constructor(props) {
        super(props);
        this.state = {};
      }
      render() {
        return (
          <View style={styles.container}>
            <LottieView
              style={{ width: 400, height: 400 }}
              source={'./task.json'}
              autoPlay
              loop
            />
          </View>
        );
      }
    }
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "white"
      }
    });
    export default HeartAnimation;

Answer 1

<LottieView
  style={{ width: 400, height: 400 }}
  source={require('./task.json')}
  autoPlay
  loop
/>

The source should have syntax like this source={require('./task.json')}