React Native iOS read image from apps Documents folder

Question

I have to download images to my iOS apps local file system and read them back.

On my simulator I can see file system of my app with directories

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

/Documents
/Library
/tmp

To try out I copied foo.png to /Documents folder and then tried

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

This does not work, any idea whats a way to do this.

Answer 1

This also took me ages... with better info it would have been 5 minutes!

I use react-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

My Image element looks like:

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

My problem was that I did not set width and height first, which is not needed for urls or paths to assets. When using a base64 uri the width and height are also mandatory (that actually led me to the solution!).