In my RN App, I am trying to display a FlatList with Image Items but it seems like I have missed something. I am retrieving blob data from my API, converting it to a String using Buffer, and then adding it to an Array. This Array is used to populate the FlatList.
export function HomeScreen() {
const imagesList: any = [];
useEffect(() => {
loadData();
}, []);
const loadData = async () =>{
await callAPI().then(res => {
//blob base64 is from type jpeg
imagesList.push({imageURI: "data:image/jpeg;base64,"+Buffer.from(res.image1).toString('ascii')})
})
}
return (
<View style={[styles.imageSlider, {width, height}]}>
<FlatList
data={imagesList}
renderItem={({item, index}) => (
<>
{console.log('item: ', item)}
<Image
key={index}
source={{uri: item.imageURI}}
style={{
height,
width,
resizeMode: 'cover',
maxHeight: 500,
maxWidth: 500,
}}
/>
</>
)}
/>
</View>
)
}
I have validated the data received from the api and everything appears to be correct, however, the images are not rendering. Could someone identify what might be causing this issue? I do not possess advanced knowledge in RN. Thank you!