10

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.

at_123_II
  • 123
  • 1
  • 1
  • 5

2 Answers2

24

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

Kishan Bharda
  • 5,446
  • 3
  • 30
  • 57
WiRa
  • 949
  • 10
  • 14
  • what is 'myAwesomeSubDir' ? is that the folder that created with the name of application? – jsina Jun 21 '18 at 11:26
  • As you can see in my answer, RNFS.DocumentDirectoryPath returns you the path to the documents directory. Your file might be directly under that directory or in a subdirectory.... So just leave that part out if your files are stored directly in the documents folder! – WiRa Jun 22 '18 at 08:09
  • for me it was a similar situation. Saving the filename for the file in the docs dir and then rebuilding the full path at run time. I could be wrong but the docs dir and parents dirs may move around / change location / uuids. – Steve Pascoe Dec 11 '18 at 16:27
  • I actually had the path already that I got with react-native-image-crop-picker and didn't need react-native-fs, i just didn't set the width and height! Thank you! – sigmapi13 Jul 05 '19 at 11:40
9

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

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