I need to render a FlatList with Image Items in my RN App, but it looks like, I missed something out.
I’m fetching blob data and parse it with Buffer to a String from my API and push it to my Array. I use that Array to render that 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>
)
}
Could anyone tell me my problem? I’m not an expert in RN
Thanks!