React native background image is just a white screen

Question

I'm using the ImageBackground component, imported from react-native, but no image is showing. It's just a white screen in the background

constructor(props){
    super(props)
    this.backgroundImage = {image: {uri: "https://i.myImage.com"}}
}

......

<ImageBackground style={styles.container} resizeMode="stretch" source={this.backgroundImage} onError={this.onError.bind(this)}>
    <AdUnit style={styles.bannerAd} />
    <Board  />
</ImageBackground>

I've tried changing this.backgroundImage to {image: require('../assets/images/default_seal.jpg')}

I tried using the resizeMode property specified by this answer but it didn't work.

Try setting this directly in your ImageBackground component: source={require('../assets/images/default_seal.jpg')} And see it if it displays the image. think the problem is on line 222: this.backgroundImage = {image:{uri: images[Math.floor(Math.random() * 16)]}} Not quire sure why you have it like this in your constructor. Looks like you are passing an array to the uri instead of a string. — Tom Bombadil, Aug 29 '20 at 09:05
Actually, I just saw the images file in your component. If you are passing an image url. You will have to set it like this: source={{ uri: this.backgroundImage }}. — Tom Bombadil, Aug 29 '20 at 09:08

Jon Jones · Answer 1 · 2020-08-29T08:45:29.847

<ImageBackground
  source={yourSourceFile}
  style={{width: '100%', height: '100%'}}
> 
    <....yourContent...>
</ImageBackground>

If you render the image property on its own is it definitely correct? e.g.

{this.backgroundImage}

In chrome is the image loading in the network tab, or displaying an error

Do you have any css on the page? If so can you remove it and re-test it. Another alternative:

<ImageBackground style={ styles.imgBackground } 
                 resizeMode='cover' 
                 source={require('./Your/Path.png')}>
</ImageBackground>

The style:

imgBackground: {
        width: '100%',
        height: '100%',
        flex: 1 
},

My code is already like this, I just have that style saved inside `styles.container` — Sam, Aug 29 '20 at 08:44

Tom Bombadil · Accepted Answer · 2020-08-29T09:14:50.350

0

Edited answer after having a look at the source code. Make your constructor like this:

 constructor(props){
        super(props)
        this.backgroundImage = images[Math.floor(Math.random() * 16)]

And your ImageBackground component like this:

<ImageBackground source={{uri: this.backgroundImage}}>

edited Aug 29 '20 at 09:14

answered Aug 29 '20 at 08:44

Tom Bombadil

3,455
1
13
24

React native background image is just a white screen

2 Answers2