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

/Libr         


        

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!).

Answer 2

Try tilda (~). React Native should expand that.

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