Iterate over to show images

Question

So, I have a Map data structure, in which the values of the map contains image uri. I simply want to show all images in the Map.

Here is what I tried:

<View style={styles.container}>
{[...imagesMap.values()].map(myImg => {
        const source = {uri: myImg.uri};

        <Image
          style={{
            width: 50,
            height: 50,
            position: 'absolute',
            left: 62,
            top: 26,
          }}
          source={source}
        />;
      })}
</View>

When run it, the screen shows blank. But if I only show one image like without iterating over a map, like this:

<View style={styles.container}>
   
      <Image
          style={{
              width: 50,
              height: 50,
              position: 'absolute',
              left: 62,
              top: 26,
            }}
              source={{uri: 'https://www.example.com/photo/1'}}
            />
  
    </View>

Then, the above single image shows on screen. That uri string used is from one value of the imagesMap.

I also looked inside the value of each image uri strings in that imagesMap, they are all valid. Why iterating that imagesMap showing images shows blank screen but showing a single image works? I mean the style are exactly the same, image sources are all valid...

Answer 1

You are not returning anything from your map thats why you are getting a blank screen. Add a return statement and it will work as expected, and as you are using absolute position better better change the positions as well.

<View style={styles.container}>
{[...imagesMap.values()].map(myImg => {
        const source = {uri: myImg.uri};

        return (<Image
          style={{
            width: 50,
            height: 50,
            position: 'absolute',
            left: 62,
            top: 26,
          }}
          source={source}
        />);
      })}
</View>