React Native: Serving URI from localhost not rendering the image

Question

I'm trying to display my uploaded image saved from to my backend folder. Its on different file so to retrieve I have to call it http://localhost:3333/userprofile/5/5.jpeg . But it does not work on my react native code, I tested it on both android and IOS

<Thumbnail
    small
    source={{
        uri: `http://localhost:3333/userprofile/${this.props.user.id}/${this.props.user.avatar}`
    }}
/>

it works when I open it on browser. It also work if I use different url like https://picsum.photos/200/300 how to deal with this?

Answer 1

From the docs ,

Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, you will need to manually specify the dimensions of your image. It's highly recommended that you use https as well in order to satisfy App Transport Security requirements on iOS.

You need to provide dimensions for your image.

<Thumbnail
    small
    source={{
        uri: `http://localhost:3333/userprofile/${this.props.user.id}/${this.props.user.avatar}`
    }}
    style={{width: 400, height: 400}} //provide dimensions 
/>

Answer 2

If you're using android emulator you have to use 10.0.2.2 to access localhost on your PC. and if you're using a real device then you need to be on the same wifi network and have to use your PC's ip instead of localhost