Using a placeholder image in react native without state manipulation

Question

So the part below is a code snippet. These images are rendered in a flatlist.

<Image
 resizeMode='cover'
 style={styles.itemImage}
 source={(product && !_.isEmpty(imageSource) && imageSource.url) ? { uri: imageSource.url } : noProductImage}
/>

Now some URLs provided will be present but it may be a broken link, so it'll pass the condition. Now I solved this by adding states for each image source but if the list has 100 items then we need to maintain 100 different states that can potentially be the same. So if there some way to solve this without states. Like maybe check the URL in the conditional statement.

score 0 · Answer 1 · answered Aug 25 '20 at 11:38

0

You can use one array in state for all images.

 this.state = {
   images : [ 
     {id: 0, url: '...'},
     {id: 1, url: '...'},
     ...
   ]
 }

Maybe it's not the best solution, but in such case you will work only with one state.

answered Aug 25 '20 at 11:38

M.N.

65
8

Yeah but the image tag is in a separate component. – Emil K Kurian Aug 25 '20 at 11:59
In FlatList you have smth like: data={this.state.imageArray} renderItem={({ item, index }) => { return ( ) }} />? – M.N. Aug 25 '20 at 12:13

Using a placeholder image in react native without state manipulation

1 Answers1