FileSystem makeDirectory and downloadAsync not cooperating

#1

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)

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:

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

Thank you!

Not all downloaded local images loading
closed #2

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.