Unredering images on flatlist

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>
);
 }
}

Where are these images located ? in a folder in the source ? — Guruparan Giritharan, May 19 '20 at 15:15
Better look at this answer https://stackoverflow.com/a/54836644/1435722 — Guruparan Giritharan, May 19 '20 at 15:18

score 0 · Answer 1 · answered May 19 '20 at 19:25

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.

Unredering images on flatlist

1 Answers1