How to show image from FileSystem

i need to download images from server and display them in the application

Here are my steps:

  • create directory
  • download image to this directory
  • try to display the image file using component

after downloading the image i checked that the file is in the directory using FileSystem.getInfoAsync().

  render() {
    let groupsDir = FileSystem.documentDirectory + "menuGroups/accounting-alone-application-938965.jpg"
    let getInfo = FileSystem.getInfoAsync(groupsDir);

//....some code here

above code to get the uri for the file

          <View style={{width: 302, height: 302, borderColor: '#3e3e3e', borderWidth: 1}}>
            <Image 
              style={{ width: 300, height: 300 }}
              source={{uri: getInfo.uri}}
              />
          </View>

this above code shows the image source

but the image is not appearing.

1 Like

I gave it a show. The following works for me:

FileSystem.getInfoAsync seems to have a pretty weird interface. :confused:

1 Like

great this worked.

i think my mistake was trying to use FileSystem.getInfoAsync without Async\await function

using the returned ‘uri’ from FileSystem.downloadAsync as you showed works fine.

and this code also using FileSystem.documentDirectory will work

let groupsDir = FileSystem.documentDirectory + "menuGroups/accounting-alone-application-938965.jpg"

EDIT: The documentation for the return value has been fixed:

Returns

If no item exists at this URI, returns a Promise that resolves to { exists: false, isDirectory: false } . Else returns a Promise that resolves to an object with the following fields:

Original comment below:

I suspect you’re right. FileSystem.getInfoAsync's API can surely not be as crazy as the documentation describes it:

Returns

If no item exists at this URI, returns a Promise that resolves to { exists: false, isDirectory: false } . Else returns an object with the following fields:

  • exists ( boolean )true .

  • isDirectory ( boolean )true if this is a directory, false if it is a file

  • modificationTime ( number ) – The last modification time of the file expressed in seconds since epoch.

  • size ( number ) – The size of the file in bytes. If operating on a source from CameraRoll.getPhotos() , only present if the size option was truthy.

  • uri ( string ) – A file:// URI pointing to the file. This is the same as the fileUri input parameter.

  • md5 ( string ) – Present if the md5 option was truthy. Contains the MD5 hash of the file.

i.e. if the file doesn’t exist, return a promise. If it does exist, return an object!? :crazy_face:

So I think the documentation is just wrong.

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