✅ - How to use s3 value in React Native Image? Amplify Gen 2

[zealous garden]

Hey everyone, I'm working on a simple project where I need to upload an image, retrieve it, and display it to the user from S3. I've successfully managed to upload and retrieve the image.

I'm using import { getUrl } from "aws-amplify/src/storage". When getUrl returns the URL, I try to use it like this: <Image source={{ uri: <s3_image_url> }} />.

However, it's not working when I use the returned URL directly, but if I manually copy the link and hard-code it, it works fine. I'm using Cognito Pools for authentication.

Has anyone encountered this issue or have any insights on how to solve it?

[zealous garden]

This is something to think about:
The data.url that I got from getUrl() is URL type not string so, I has docuble quote build in on it. When passing URL type in Image Source, it was not reconizing. Work around is, you have to cast String(data.url) and it works.

try { console.log([StorePicture] Fetching S3 image for key: ${uploadedMediaKey}); const data = await getUrl({ path: uploadedMediaKey }); if (data.url) { console.log([StorePicture] S3 image URL fetched successfully for key: ${uploadedMediaKey}); setS3Image(String(data.url)); } else { console.log([StorePicture] No URL found for key: ${uploadedMediaKey}); } } catch (error) { console.error([StorePicture] Error fetching S3 image for key: ${uploadedMediaKey}, error); }

[silver grove]

✅ - How to use s3 value in React Native Image? Amplify Gen 2