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 two problems in your code.
JSX from your map function.flexDirection = rowChange 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>