[Question] Loading an image saved to a path from RNFS

[AlexDM0]

Hi,

I'm using gl-react-native and use their captureFrame method to save an image to file. I use RNFS to get the path for this file. If I lookup the path I can see that the image is there and can be reviewed using a normal image application.

However, when I want to require() it in an Image tag, I get the error that it cannot be resolved. The path is:
"file:///Users/alex/Library/Developer/CoreSimulator/Devices/6955A1DF-7189-4FD1-91EE-AFE106019086/data/Containers/Data/Application/F19A2400-3339-4C01-9FAA-FB36AE54C00E/Library/Caches/image.png"

Any idea why I cannot require this to show it as an image? I tried with and without the file://, I tried making it a relative path from the MainBundle path but none of them give me the image. Is there something obvious I'm overlooking?

It doesnt work on Android or iOS on either device or simulator.

(RN 0.21 if it matters)

Cheers

[mcorb]

require() is a build-time directive for bundling resources with the application.

You should instead set the image source kind of like this:

self.setState({photoSource: {
uri: 'file://' + filePath,
//type: res.headers['content-type'],
//name: file.Name()
}});

There are examples linked in the tests project of RNFS.

Actually it'd be cool if RNFS had a utility function to conver a file path string into a source object like this for direct use with the react-native UI.

[AlexDM0]

Great thanks!

[AlexDM0]

I've searched this entire project for uri and looked through the code in the integration tests but I cant find the example you refer to. Is it another project? I did find the pull req for supporting file:// paths. Is that something required to get it working?

[AlexDM0]

Nevermind sorry, I found the test project and turns out I forgot to provide style information to the image.. Thanks for the help!

[adamgf]

require() is a build-time directive for bundling resources with the application.

You should instead set the image source kind of like this:

self.setState({photoSource: {
uri: 'file://' + filePath,
//type: res.headers['content-type'],
//name: file.Name()
}});

There are examples linked in the tests project of RNFS.

Actually it'd be cool if RNFS had a utility function to conver a file path string into a source object like this for direct use with the react-native UI.

How about a simple code example?