0

I want to square the background Image like for example

height : 200, width : 200,

But then also I want to change the size depending on the display size like:

width: Dimensions.get('window').width / 2.5 height: 'auto'

How can I do this?

set height to 'auto' does not work. Also I played with resizeMode

This are the style props:

  backgroundImageStyle: {
    alignSelf: 'center',
    top: 100,
    resizeMode: 'stretch',
    alignItems: 'center',
    width: 200,
    height: 200,
    position: 'absolute'
  },
user9468014
  • 479
  • 2
  • 6
  • 20

1 Answers1

1

You can use your backgroundImageStyle as default styling option, but I would recommend using resizeMode "contain". In your render method you can override your height/width with: 

<Image source={{YOUR_IMAGE_URI}} 
style={[styles.backgroundImageStyle, {width: Dimensions.get('window').width, height: Dimensions.get('window').width}]}
/>

Working Example:

https://snack.expo.io/S15hYZVAN

Output:

example

Edit:

If you don't want to have the full size, you can scale down the image by dividing the width by a factor as shown below: 

<Image source={{YOUR_IMAGE_URI}} 
style={[styles.backgroundImageStyle, {width: Dimensions.get('window').width/2.5, height: Dimensions.get('window').width/2.5}]}
/>
Tim
  • 10,459
  • 4
  • 36
  • 47
  • Thanks for your answer. The thing is that I don't want to show the picture in full size. Is it possible to make it smaller but still a square or do I have to edit it manually with photoshop and then just load the full image? – user9468014 Jun 05 '19 at 08:12
  • 1
    @user9468014 you can divide the width by a factor like you did in your question, that's not a problem. I've updated my answer to show you how it works – Tim Jun 05 '19 at 08:14