React-native-fs: [Question] Loading an image saved to a path from RNFS

Created on 18 Mar 2016 · 5Comments · Source: itinance/react-native-fs

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

Source

AlexDM0

Most helpful comment

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.

mcorb on 19 Mar 2016

👍5

All 5 comments

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.

mcorb on 19 Mar 2016

👍5

Great thanks!

AlexDM0 on 19 Mar 2016

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 on 21 Mar 2016

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

AlexDM0 on 21 Mar 2016

👍2 🎉1

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?