Recommand · October 14, 2021 0

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

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

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>

Considering your Data is valid and Data.CompanyImages is the array you have shown in your question, then I see only one problem in your code. You are not returning your JSX from your map function.

You have to return the JSX from your map function.

Change your map to,

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