React Native iOS reads image from applications Document folder

Question

I need to upload images to the local file system of iOS applications and read them.

On my simulator, I see the file system of my application with directories

/Library/Developer/CoreSimulator/Devices/[UUID]/data/Containers/Data/Application/[UUID]/

/Documents
/Library
/tmp

To try, I copied the foo.png file to the / Documents folder and then tried

<Image source={{uri: "file://Documents/foo.png"}} style={{width:100, height:100}}/>

It does not work, any idea is a way to do it.

Answer 1

It also took me a lot of time ... with better information it would be 5 minutes!

I use response-native-fs to get directories (which works for ios and android):

var RNFS = require('react-native-fs');

RNFS.DocumentDirectoryPath then returns something like '/var/mobile/Containers/Data/Application/15AC1CC6-8CFF-48F0-AFFD-949368383ACB/Documents'on iOS

Image :

<Image
    style={{width:100, height:100}}
    source={{uri: 'file://' + RNFS.DocumentDirectoryPath + '/myAwesomeSubDir/my.png', scale:1}}
/> 

, , URL- . base64 uri ( !).

Answer 2

(~). React Native .

<Image
   style={{width:100, height:100}}
   source={{uri: '~/Documents/myAwesomeSubDir/my.png', scale:1}}
/>