How to Show multiple Images in row from Data. in react native

Question

My Data Look Like This

["https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg","https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg","https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg","https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg"]

Now I want To Show These 4 images in row

I am Mapping Like this

{Data.CompanyImages.map((item) => {
  <View style={{flexDirection: 'row'}}>
    <Image
      style={{
        height: 80,
        width: 80,
        marginTop: 1.5,
        borderRadius: 7,
      }}
      source={{uri: item}}
    />
  </View>;
})}

but its not showing anything please help

Answer 1

Open any image of your list in the browser, you can see that there is an error returned, please make sure you set the images to public access in your S3 or adjust your code to pass some params to indicate that the access to those images is valid and the S3 return the content

Check Your image link

<Error>
<Code>PermanentRedirect</Code>
<Message>The bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this endpoint.</Message>
<Endpoint>s3.amazonaws.com</Endpoint>
<Bucket>files-bucket</Bucket>
<RequestId>Z72TT83DFD04M8EJ</RequestId>
<HostId>AMuc/KSYXayYgzkigho3CTqNluTLEDAI/EYUug3U4NKsJB8xbnJSDsFn8VlaNZ50N73EAWhi2p0=</HostId>
</Error>

Answer 2

Considering your Data is valid and Data.CompanyImages is the array you have shown in your question, then I see two problems in your code.

1. You have to return the JSX from your map function.
2. Wrap the map function with a View with flexDirection = row

Change your map to,

<View style={{flexDirection: 'row'}}> // wrap list with flexDirection row
  {Data.CompanyImages.map((item) => ( //returning JSX with ()
    <Image
      style={{
        height: 80,
        width: 80,
        marginTop: 1.5,
        borderRadius: 7,
      }}
      source={{uri: item}}
    />
  ))}
</View>