0

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.

Alan
  • 1,134
  • 2
  • 13
  • 25
  • you want single image to cover the whole screen or you want repetitive image to cover the whole screen ? – Hazim Ali Apr 10 '19 at 17:19
  • @HazimAli I want a repetitive image to cover the whole screen – Alan Apr 10 '19 at 17:29
  • did you wrapped ImageBackground with another view? or anything.. it supposed to follow the parent since you put flex 1 to the component.. and I dont find the imageStyle is needed in this case – Hazim Ali Apr 10 '19 at 17:40
  • @HazimAli The ImageBackground is not wrapped in anything, it doesnt even have any children (i have tried it with and without children).. I did also omit imageStyle prop and placed the `resizeMode='repeat'` as a direct prop but nothing. I still get the same results... I know the ImageBackground view covers the entire screen, so I think it may have something to do with the inner Image but I am stumped – Alan Apr 10 '19 at 17:51
  • @HazimAli I think my issue may have to do with the fact that I am using React Native Navigation and the way it lays out the components.. I just tried the same code on expo and it works as expected. – Alan Apr 10 '19 at 18:25
  • have you tried `width: '100%` and `height: '100%'`? – Zaytri Apr 10 '19 at 20:55

1 Answers1

1

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% }
diedu
  • 19,277
  • 4
  • 32
  • 49
displayname
  • 1,044
  • 7
  • 12