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',
},
},