Why my images aren't showing in React Native

Question

I'm trying to show some images in my React Native app. It's a simple app, only for Android. The app get informations from an API. The initial View is a list of items and when I click in one item, it gets more info from the API and show in a new page. I also get some urls that points to images that are kept in a S3 bucket in AWS.

This is how I show the images:

<ScrollView>
    {this.state.urls.map(url => {
        <Image 
            source={{uri: url}} 
            style={{width:400, height:200}}
        />
    }
</ScrollView>

The problem is that it's not showing those images. I can see that there is a part of the page that is for the image. I can see that because if a put the image first and after that some text, the text will appear at the bottom of the page. I don't know what is going on that the image doesn't appear.

I searched for an answer, found something about using https instead of http (at least for iOS). Found that I need to set width and height. I already did those things and others but it's not working.

I also tried just picking a image from the internet and putting it url direct in uri but it still doesnt't work.

This is one that I get from my api that is kept at AWS S3 Bucket. — Breno Nogueira
– Breno Nogueira, Commented Dec 15, 2018 at 18:48

Andrew · Accepted Answer · 2018-12-15 19:04:45Z

3

You're missing a return statement in your map function.

<ScrollView>
    {this.state.urls.map(url => {
       return <Image 
            source={{uri: url}} 
            style={{width:400, height:200}}
        />
    }
</ScrollView>

UPDATE

I just tried the url that you provided in the above comment and it doesn't work on my device. I tried a different image from the internet this one and it works. There may also be something that is stopping you from accessing the images from within a mobile app.

To debug further I try would a single <Image .../> with the image hosted on AWS and see if you can get that to show. There may need to be some AWS configuration that you need to change to allow the image to be accessed from a mobile device.

edited Dec 15, 2018 at 19:04

answered Dec 15, 2018 at 18:57

Andrew

28.7k9 gold badges94 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Breno Nogueira Over a year ago

I tried with the image you passed and it worked. It's something with permission or another problem with AWS S3 Bucket. I'll search for the problem. Thanks for pointing where the problem really is.

Andrew Over a year ago

There are two problems. First the lack of return statement in the map, and second with the AWS images.

Breno Nogueira Over a year ago

Thanks for the help. My problem really was the lack of return. The problem with the AWS link I passed here is that it was already expired. Getting a new one works.

Andrew Over a year ago

That's great. I am so pleased that it worked for you :)

Suraj Malviya · Accepted Answer · 2018-12-15 18:58:20Z

1

Assuming your image URLs are accessible in your application. The below code will show your images. Actually you forgot to return a component from the map which is a must have.

<ScrollView>
   {this.state.urls.map(url => {
       return <Image 
                source={{uri: url}} 
                style={{width:400, height:200}} /> }
   }
</ScrollView>

answered Dec 15, 2018 at 18:58

Suraj Malviya

3,7831 gold badge17 silver badges23 bronze badges

1 Comment

Breno Nogueira Over a year ago

Thanks for the help. The problem was the lack of return.

Collectives™ on Stack Overflow

Why my images aren't showing in React Native

2 Answers 2

4 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Related