Can't display Image with temporary file from react native vision camera

Question

I'm learning React Native by building an app that takes a picture and shows the image in a gallery.

I'm using react-native-vision to take the photo and react-native-fs to access the temporary file as suggested in this answer and use it as the uri of <Image/>

However, the View that should display a list of </Image> it's showing a blank space

This is my code:

// saves photo on Array and closes the Camera View

const onPressButton = async () => {
    console.log(cameraRef.current);
    console.log(123);
    const photo = await cameraRef.current.takePhoto({
      flash: 'off',
      qualityPrioritization: 'speed',
    });

    console.log(photo);

    setPhotos([...photos, photo]);

    setShowCamera(false);
    return;
  };

   // how I'm trying to render the photos
      {photos && photos.length > 0 && (
    <View style={{width: '50%', height: '50%'}}>
    {photos.map((photo, index) => (
      <View key={index}>
        {console.log('file://' + DocumentDirectoryPath + photo.path)}
         <Image style={{maxWidth: 10, maxHeight: 20}} source={{uri: 'file://' + DocumentDirectoryPath + photo.path}} /> 
      </View>
    ))}
    </View>
  )}

This is how it looks:

Is there something wrong with my code?

Thanks for the help.

Answer 1

There are 2 potential errors in your source code.

1. Photo taken by react-native-vision is cached. (photo.path look something like this: /data/user/0/your.app/cache/mrousavy6472....jpg) So do not use DocumentDirectoryPath, use just source={{uri: 'file://' + photo.path}}
2. Second potential error is Your photo is not shown because he is hidden from view. Try to set style like this: style={{width: '100%', height: '100%'}}

So in final look like this:

<Image style={{width: '100%', height: '100%'}} source={{uri: 'file://' + photo.path}} />