How to provide JSON file as source to LottieView

Question

I'm building an app in React Native in which I am using LottieFiles. If I provide it with locally stored .json file it works fine:

<LottieView style={styles.container} source={require('../Assets/Animations/city.json')} autoPlay loop />

But I try to do the same thing using a URL:

<LottieView style={styles.container} source={{ uri: 'https://assets3.lottiefiles.com/packages/lf20_0apkn3k1.json' }} autoPlay loop />

I've even tried saving the Lottiefile in Firebase Storage and providing that URL but the error I get is:

Invariant Violation: [7549,"LottieAnimationView",1,{"progress":0,"speed":1,"loop":true,"resizeMode":"contain","sourceJson":"{"uri":"https://assets3.lottiefiles.com/packages/lf20_0apkn3k1.json"}","onAnimationFinish":true,"onLayout":true,"aspectRatio":"<>","position":"absolute","left":0,"right":0,"top":0,"bottom":0}] is not usable as a native method argument

UPDATE 1

I'm fetching the JSON like this:

    const [jsonRet, setJsonRet] = useState({});

    getData = () => {
        fetch('https://assets3.lottiefiles.com/packages/lf20_0apkn3k1.json', {
            method: 'GET',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json'
            }
        }).then(response => response.json()).then(data => {
            console.log('DATA IS: ' + JSON.stringify(data));
            setJsonRet(data)
        }).catch(err => {
            console.error(err)
        });
    }

    getData()

It works as to where I have consol.log I can see a long JSON response which looks like how Lottie JSON files are then I use jsonRet as:

<LottieView source={jsonRet} autoPlay loop />

I am using https://github.com/lottie-react-native/lottie-react-native package.

The errors I'm getting are:

Invariant Violation: [77,"LottieAnimationView",591,{"loop":true,"progress":0,"speed":1,"resizeMode":"contain","sourceJson":"{}","onAnimationFinish":true,"onLayout":true,"aspectRatio":"<>","position":"absolute","left":0,"right":0,"top":0,"bottom":0}] is not usable as a native method argument

And

Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

UPDATE 2

I tried it like this and it's printing the right JSON but putting it in LottieView fails:

    const [jsonRet, setJsonRet] = useState({});

    getData = () => {
        fetch('https://assets3.lottiefiles.com/packages/lf20_0apkn3k1.json', {
            method: 'GET',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json'
            }
        }).then(response => response.json()).then(data => {
            console.log('DATA IS: ' + JSON.stringify(data));
            setJsonRet(data)
        }).catch(err => {
            console.error(err)
        });
    }

    getData()

Then I put it in LottieView as:

<LottieView source={jsonRet} autoPlay loop />

The errors:

Invariant Violation: [77,"LottieAnimationView",1,{"loop":true,"progress":0,"speed":1,"resizeMode":"contain","sourceJson":"{}","onAnimationFinish":true,"onLayout":true,"aspectRatio":"<>","position":"absolute","left":0,"right":0,"top":0,"bottom":0}] is not usable as a native method argument

and

Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

Answer 1

As said here, you can fetch a JSON from a API, or something like that, and use it like as follow:

let somejson = fetch("<jsonURL>")

render(){

    {
        !somejson ? null : <LottieView source={somejson} autoPlay loop />
    } 
}

If you dont have any API to fetch from, you can probably:

First: Fetch a .JSON file from somewhere, using react-native-fetch-blob or react-native-fs.

Second: Read the JSON file with something like this:

const customData = require('./customData.json')

As said here

Then, use it as said on the beginning of the answer!

[EDIT]

The error you're getting, it's on the fetch part of the code, wich ou can do like this:

async function getLottieJSON(){

  return fetch("https://assets3.lottiefiles.com/packages/lf20_0apkn3k1.json", {
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    }
  })
  .then((response) => response.json())
  .then((json) => {
    return json;
  })
  .catch((error) => {
    return(error)
  });
}

Then, call it on a async function, probably:

let somejson = await getLottieJSON()

More about the Fetch function here.