The title sum it up, i just wanted to render images from array into my flatlist, but i get an error when i tries to call it like this:
<FlatList
style={styles.flatView}
data={data}
keyExtractor={(item)=>item.id}
numColumns={2}
columnWrapperStyle={styles.flatRow}
renderItem={({item})=>(
<View style={styles.itemView}>
<Image style={styles.image} source={require(item.image)} />
<View>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.harga}>{item.price}</Text>
<Text style={styles.type}>{item.category}</Text>
</View>
</View>
)}
>
</FlatList>
I get error:
Invalid call at line 45: require(item.image)
My Array Call:
const getData = () =>{
axios.get('https://fakestoreapi.com/products')
.then((res)=>{
let data = res.data
// console.log(data)
setData(data)
})
.catch((error)=>{
console.log(error)
})
}
useEffect(()=>{
getData()
},[])
How do i call the image the right way?
To load images from a link, you use uri instead of require.
<Image
source={{
uri: your link here,
}}
/>