[FIXED] How to render image with content:// in react native

Issue

I am using react-native-scoped-storage for getting all files in a folder. I am getting the image in the following URI format:

"uri": "content://com.android.externalstorage.documents/tree/primary%3AAndroid%2Fmedia%2Fcom.whatsapp%2FWhatsApp%2Fmedia%2F.Statuses/document/primary%3AAndroid%2Fmedia%2Fcom.whatsapp%2FWhatsApp%2Fmedia%2F.Statuses%2Fimages.jpeg"

How I can render this image in the component? I would really appreciate it if anyone can provide me with a solution.

I am new to react native. Thank you.

Solution

Look like you are loading image from URI. You can check it in docs https://reactnative.dev/docs/images#uri-data-images

// include at least width and height!
<Image
  style={{
    width: 51,
    height: 51,
    resizeMode: 'contain'
  }}
  source={{
    uri: 'content://com.android.externalstorage.documents/tree/primary%3AAndroid%2Fmedia%2Fcom.whatsapp%2FWhatsApp%2Fmedia%2F.Statuses/document/primary%3AAndroid%2Fmedia%2Fcom.whatsapp%2FWhatsApp%2Fmedia%2F.Statuses%2Fimages.jpeg'
  }}
/>

Answered By - Thành Thỏ
Answer Checked By - Senaida (JavaFixing Volunteer)