Unredering images on flatlist - image

Question

I am trying to add a different image to each key of my flatlist. However, the images aren't being showed on the screen by rendering the items, just the keys. The source of the images is correct, so as the name of the images. Can you find the mistake that I have made?
export default class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
searchText: '',
};
}
render() {
//Data can be coming from props or any other source as well
const data = [
{
key: 'Athlean-X',
logo: 'athlean_x.png'
},
{
key: 'Panelaria Ricardo Faria',
logo: "euro2020.png"
},
{
key: 'tEsLa',
logo: "jamor.png"
},
{
key: 'Lols Inc.',
logo: "rock_in_rio.png"
},
{
key: 'Vale de Silicone',
logo: 'splash.png'
},
{
key: 'Empresa do Helder',
logo: "edp_cooljazz.png"
},
{
key: 'BD Swiss',
logo: "superbock_superrock.png"
}
];
const filteredData = this.state.searchText
? data.filter(x =>
x.key.toLowerCase().includes(this.state.searchText.toLowerCase())
)
: data;
return (
<View style={styles.container}>
<View style={styles.flatlist}>
<FlatList
data={filteredData}
renderItem={({ item }) => (
<View style={{flexDirection:'row'}}>
<Image
style={{width:50, height:50, alignSelf: 'center', borderRadius:300}}
source={{uri:item.logo}}
/>
<Text style={styles.item}>{item.key}</Text>
</View>
)}
/>
</View>
</View>
);
}
}

Answer 1

The images saved locally must be called using require function.
<FlatList
data={filteredData}
renderItem={({ item }) => (
<View style={{flexDirection:'row'}}>
<Image
style={{width:50, height:50, alignSelf: 'center', borderRadius:300}}
source={require(item.logo)}
/>
<Text style={styles.item}>{item.key}</Text>
</View>
)}
keyExtractor={item=>item.key}
/>
Flatlist requires every individual component in the list to have a unique key. That's why item.key is provided to key extractor.