Image Tag does not render image from device, only from outside Native React device

Asked

Viewed 26 times

0

I’m trying to make a kind of gallery in React Native but I found a problem when accessing local files (in case only images), I used the Cameraroll library that is now in the React Native Comunity package.

The image does not render either by Uri using state (images[0].node.image.Uri), or even saving this value obtained by direct log in a variable, or directly in the tag (as it is in the code), but when trying to do the same with a web image it renders the image correctly.

The App has access to Storage in the emulator to write, modify and read. The getPhotos method works correctly and returns me the two images I have on the device 1 in Downloads and 1 in DCIM.

Someone passed/solved similar problem ?

  const [images, setImages] = useState([]);

  async function getPhotos() {
    if (Platform.OS === 'android' && (await hasAndroidPermission())) {
      CameraRoll.getPhotos({
        first: 4,
        assetType: 'All',
      }).then(r => {
        setImages(r.edges);
      });
    }
  }

 function handleGetPhotos() {
    getPhotos();
  }

  return (
    <View>
      <ButtonGet title="Get Photos" onPress={() => handleGetPhotos()}>
        <Text>Botao</Text>
      </ButtonGet>

      <Image
        style={{width: 50, height: 50}}
        // source={{
        //   uri: 'https://reactjs.org/logo-og.png',
        // }} //Imagem que funciona corretamente
        source={{
          uri: 'file:///storage/emulated/0/DCIM/Camera/IMG_20210718_112257.jpg',
        }}
        resizeMode={'contain'} //Ja retirei também, não surte efeito
      />

      <FlatList
        data={images}
        keyExtractor={item => item.node.timestamp}
        renderItem={({item, index}) => (
          <View style={{backgroundColor: 'blue', marginBottom: 15}}>
            <Text>{item.node.group_name}</Text>
            {/* <Image source={{uri: item.node.image.uri}} /> */}
          </View>
        )}
      />
    </View>
  );

Example of an object belonging to r.edges (which is an array):

node: {
  group_name: 'Download',
  image:{
    fileSize: null, 
    filename: null, 
    height: null, 
    playableDuration: null, 
    uri: 'file:///storage/emulated/0/DCIM/Camera/IMG_20210718_112257.jpg', 
    width: null
  }, 
  location: null,
  modified: 1626550157,
  timestamp: 1626550156,
  type: 'image/jpeg',
  },
},
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.