FileSystem makeDirectory and downloadAsync not cooperating

[miaoumeow]

Hello!

I’m having difficulty with downloading an image to the phone’s storage and then displaying the image in render(). Through trying to solve this issue I was trying to make a new directory to save the images to, and I came across this error while doing so:

Error:Directory ‘file:///data/user/0/host.exp.exponent/files/ExperienceData/%2540anonymous%252FAwesomeProject3-06901279-9906-49bb-990e-fe1e007a0081/RefugeeResources’ could not be created.

I’ve created a snack with my code (built upon the tabs starter example)

AwesomeProject3 - Snack

However, running it from the snack instead of Expo CLI on my computer will not produce those errors. But, if you look in the console log of the snack, I’ve added in some tests for the file URI and testing for URI.exists comes back as false. (This is in components/IconButton.js)

 async componentDidMount(){
    try {
      await FileSystem.makeDirectoryAsync(
        `${FileSystem.documentDirectory}RefugeeResources`,
        {
          intermediates: true
        }
      )
    } catch (e) {
      console.log(e)
    }
    Expo.FileSystem.downloadAsync(
      "http://portfolio.snazgirl.ca/img/sfuau/final.jpg",
      FileSystem.documentDirectory + '/RefugeeResources/small.jpg'
    )
      .then(({ uri }) => {
        console.log('Finished downloading to ', uri);
        iconTestPath=FileSystem.documentDirectory + '/RefugeeResources/small.jpg';
        console.log(iconTestPath);
        console.log({uri:iconTestPath});
        console.log(Boolean({iconTestPath}.exists));
      })
      .catch(error => {
        console.error(error);
    });
  }

and then in render:

render(){

    return(
      <View style={styles.ButtonBox}>
        <Image source={{uri:iconTestPath}} style={{width:100, height:100}}/>
.......
</View>
)}

And in the console log:

 Finished downloading to  file:///data/user/0/host.exp.exponent/files/ExperienceData/%2540anonymous%252FAwesomeProject3-06901279-9906-49bb-990e-fe1e007a0081/RefugeeResources/small.jpg
[15:55:37] file:///data/user/0/host.exp.exponent/files/ExperienceData/%2540anonymous%252FAwesomeProject3-06901279-9906-49bb-990e-fe1e007a0081//RefugeeResources/small.jpg
[15:55:37] Object {
[15:55:37]   "uri": "file:///data/user/0/host.exp.exponent/files/ExperienceData/%2540anonymous%252FAwesomeProject3-06901279-9906-49bb-990e-fe1e007a0081//RefugeeResources/small.jpg",
[15:55:37] }
[15:55:37] false

I’m new React Native and app development, but I do know computer programming. I’ve been banging my head against this for more than a day now, I’ve looked all over the place, but I can’t seem to find a solution. It appears my issue may be similar to these forum posts:

makeDirectoryAsync() error "could not be created"

I’m getting Sentry reports from some of my Android customers who get errors during makeDirectoryAsync(). The error is “Directory xxx could not be created”. The odd thing is that if I call getInfoAsync() after it fails, the directory has actually been created. It looks like await makeDirectoryAsync() reported failure early but then went on to create it anyway. To debug it I made a function that creates a directory that doesn’t exist. On error it shows the directory existence before and after: /…

How to save Images using Expo Filesystem?

How to save the images into a folder in the app from image url in an Api. and save that path in sqlite. I tried Expo.FileSystem.makeDirectoryAsync(fileUri, options) for creating a directory then i download the images with Expo.FileSystem.downloadAsync(uri, fileUri, options) and then i move this to the folder when i created Expo.FileSystem.moveAsync(options) . But only thing working will be i can only download the images from the api but the image is download to the Expo.FileSystem.documentDirec…

Any help is appreciated. Even if it’s a simple fix and a silly mistake this whole time.

Thank you!