CODEWITHSUNDEEP
react-nativeimagebackground
Alan
Alan

Reputation: 1134

React Native ImageBackground with resizeMode set to 'repeat' is not covering entire element (blank space left)

I am trying to create a "tiled" background with a single ImageBackground element covering the entire screen of the device. My issue is that even though the ImageElement is covering the entire screen as can be seen by the red border on the attached image, the internal image only covers the entire width and leaves a blank space vertically. I have checked the docs but cannot find anything relevant. Here is my component

      <ImageBackground source={require('../../images/linepattern.jpg')} style={[styles.container]}
  resizeMode='repeat' 
  imageStyle={{resizeMode : 'repeat', overflow : 'visible', backfaceVisibility: 'visible', flex : 1}}>

and its styling

container: {

flex : 1,
borderColor: 'red',
borderWidth:10

}

Screenshot of my phone

thanks for the help.

Upvotes: 0

Views: 2839

Answers (1)

displayname
displayname

Reputation: 1064

try this;

<ImageBackground
  source={require('../../images/linepattern.jpg')}
  style={styles.container}
  imageStyle={{
    resizeMode: 'repeat',
    overflow: 'visible',
    backfaceVisibility: 'visible',
    flex: 1,
  }}
>
  ....
</ImageBackground>;

and then

container:{height:'100%, width:'100% }

Upvotes: 1

Related Questions