CODEWITHSUNDEEP
javascriptreact-nativeamazon-s3
rdrgtec
rdrgtec

Reputation: 640

React-Native image seems to load but it shows blank

I'm using an S3 bucket as origin for my app's images. Storage.get seems to be working fine, as when I copy and paste the link on the browser, it loads the image correctly. However, the Image tag seems not to be working...

It seems to load the image correctly, as it shows its space in the app, but it doesn't show the actual image.

Here is the code:

  render() {
        return(
            <View style={Styles.vContainerF}>
                { this.state.gmpLogoURL ? 
                    <Image  style={{flex:1}}
                            resizeMode='contain'
                            source={{uri: this.state.gmpLogoURL }}
                     /> 
                : null }

This is the view style config:

  vContainerF: {
    flex: 1,
    padding: 10,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },

Any hints on what could be the issue?

Thanks in advance folks!

Upvotes: 1

Views: 1195

Answers (1)

Kishan Bharda
Kishan Bharda

Reputation: 5700

As described in react-native image doc :

Note that for network and data images, you will need to manually specify the dimensions of your image!

So add height and width to your image style :

<Image 
  style={{ flex: 1, height: 100, width: 100 }}
  resizeMode='contain'
  source={{ uri: this.state.gmpLogoURL }}
/>

Upvotes: 4

Related Questions