React native not displaying presigned AWS S3 URL coming from backend

Question

I have a React Native snippet like this to show images in a flatlist card.

<Image
style={subheader.image}
source = {{uri : image_url}}
/>

image_url has value somthing like this:

https://mc-staging-1.s3.ap-southeast-1.amazonaws.com/uploads/stock/image/e9e5b888-a7f3-491b-b729-311d2e87279a/fed-bank--big.svg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4SDSGDOCH6EQY3V6%2F20220115%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20220115T084616Z&X-Amz-Expires=900&X-Amz-SignedHeaders=host&X-Amz-Signature=44463cf9da7aec37b094d987fdb3571b6df6e12bd2c420bd1ebe4667362465b9

The image gets displayed in the browser but not on react native app. when I hardcode the URL as something that is publicly available (without any signature), it works fine.

Answer 1

I had a similar issue where the image was working on web and android but not working on ios. I found this on the RN docs:

"It's highly recommended that you use https as well in order to satisfy App Transport Security requirements on iOS."

https://reactnative.dev/docs/images#network-images

Once I changed "http" to "https" the image now works on ios.