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

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.

There are 2 potential issues in your source code.

1. Photo taken by react-native-vision is cached. (photo.path looks e.g. /data/user/0/your.app/cache/mrousavy6472....jpg). So, don't use DocumentDirectoryPath, just use source={{uri: 'file://' + photo.path}}
2. A secondary potential issue is that your photo might not be displayed because it's hidden from view. Try setting the style like this: style={{width: '100%', height: '100%'}}

Finally, it's looks like this:

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