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!
Two problems I can see...
// Define state using the useState hook
const [ imagesList, setImagesList ] = useState<Array<{ imageURI: string }>>([]);
const loadData = async () => {
const { image1 } = await callAPI()
// you want an array for some reason ¯\_(ツ)_/¯
return [{
imageURI: `data:image/jpeg;base64,${Buffer.from(image1).toString("base64")}`
}]
}
useEffect(() => {
loadData.then(setImagesList)
}, [])