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.

Answer 1

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}}>

Answer 2

<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 
},