javascriptreactjsreact-nativeimagebackground

React native background image is just a white screen

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.

Solution

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