So i got this component to pick or select multiple images and save it (or not) in this empty array to display them in a sort of carousel, at least this my idea, anyways, this is my function
const selectImage = async () => {
const ImageList = [];
ImagePicker.openPicker({
multiple: true,
waitAnimationEnd: false,
includeExif: false,
forceJpg: true,
compressImageQuality: 0.3,
maxFiles: 10,
mediaType: 'photo',
includeBase64: true,
}).then(response => {
response.map(image => {
setImages(ImageList.push({
id: ImageList.length,
filename: image.filename || Moment().toString(),
path: image.path,
type: image.mime,
data: image.data,
}));
});
setImages(ImageList);
console.log(ImageList);
}).catch((e) => {
console.log('ERROR ' + e.message);
Alert.alert('ERROR ', e.message);
});
};
the result of the object is this
so a simple way to show the images is this
Object.keys(Images).length !== 0 ? Images && (
Images.map((value, index) => {
return (
<View key={index.key}>
<Text>{value.filename}</Text>
<Image style={{width: 200, height: 200}} source={{uri: `data:${value.type};base64,${value.data}`}}/>
</View>
);
})
)
: null
so that works flawless, but this doesn't...
<FlatList
data={Images}
horizontal={true}
decelerationRate="fast"
bounces={false}
renderItem={(item, index) => {
<View style={styles.alignView}>
<View style={styles.titleTextView}>
<Text>{item.filename}</Text>
<Image style={{width: 200, height: 200}} source={{uri: `data:${item.type};base64,${item.data}`}}/>
</View>
</View>;
}}
keyExtractor={(item, index) => item.id}
/>
at first i thought it was the key extractor, but it doesn't seem to be the problem
EDIT: Solved, i was missing a {} inside the render item plus a return
renderItem={({item, index}) => {
return <View style={styles.alignView}>
<View style={styles.titleTextView}>
<Text>{item.filename}</Text>
<Image style={{width: 200, height: 200}} source={{uri: `data:${item.type};base64,${item.data}`}}/>
</View>
</View> //<Text>{item.filename}</Text>; /**/
}
