React Native: How to load Lottie file from local path - react-native

Question

I use react-native-fs to download a Lottie file (json) from a remote server. After saving it to the filesystem I get a path like /Users/marlon/Library/Developer/CoreSimulator/Devices/8E0A092D0E86/data/Containers/Data/Application/AADD60D8DFAD/Documents/animation.json.
Is there now any way to use that filepath as a source for LottieView? I tried various approaches, but neither of them succeeded:
var path = '/Users/marlon/Library/Developer/CoreSimulator/Devices/8E0A092D0E86/data/Containers/Data/Application/AADD60D8DFAD/Documents/animation.json'
<LottieView source={{ uri: path }} />
<LottieView source={{ uri: 'file:/' + path }} />
<LottieView source={{ uri: 'file://' + path }} />
<LottieView source={{ uri: 'file://' + path, isStatic: true }} />
ANSWER
Its ok to just pass the animation file as a javascript object to the LottieView. So what I did now, was opening the file with react-native-fs and parsing it with JSON.parse. The final result looks like:
RNFS.readFile(animations.congratsAnimation).then(res => {
this.setState({ animation: JSON.parse(res) });
}
...
<LottieView source={this.state.animation} />

Answer 1

You should not hardcode the downloaded json file path, but rather keep it on a device's storage, e.g. Picture folder:
npm install --save react-native-fetch-blob
const { config, fs } = RNFetchBlob
RNFetchBlob.config({ path : RNFetchBlob.fs.dirs.DocumentDir + '/animation.png' + })
.fetch('GET', 'http://example.com/file/whichever', {
'Cache-Control' : 'no-store'
})
.then((res) => {
// where the file is, keep it as state.animationPath
this.setState(animationPath: res.path())
})
//render()
<LottieView source={{require(this.state.animationPath)}, isStatic: true }} />

Answer 2

I think you should use require() function while referencing the path for the resources.
For example you can do something like:
var path = require('/Users/marlon/Library/Developer/CoreSimulator/Devices/8E0A092D0E86/data/Containers/Data/Application/AADD60D8DFAD/Documents/animation.json');
or
<LottieView source = {require('/Users/marlon/Library/Developer/CoreSimulator/Devices/8E0A092D0E86/data/Containers/Data/Application/AADD60D8DFAD/Documents/animation.json')} />