rendering image on flatlist from link in array

Question

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?

Answer 1

To load images from a link, you use uri instead of require.

  <Image
    source={{
      uri: your link here,
    }}
  />