'React Native: Base64 Image Array String not rendering in FlatList
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>
)
}
I checked the data that I receive from the api and everything is fine, but it's not rendering
Could anyone tell me my problem? I'm not an expert in RN Thanks!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|