2

I have the following image in my React Native app

enter image description here

I want to have this image inside a parent element with no space above or below it, and I want the image to not overshoot the left or right sides of the screen

When I have the code like this

<View style={{
    marginTop: 100,
    borderWidth: 2,
    borderColor: 'red'
}}>
    <Image
        style={{
            width: '100%'
        }}
        source={require('@images/swoosh-02.png')}
    />
</View>

I get this, because default for resizeMode is cover

enter image description here

When I change it to this (adding resizeMode='contain')

<View style={{
    marginTop: 100,
    borderWidth: 2,
    borderColor: 'red'
}}>
    <Image
        style={{
            width: '100%'
        }}
        resizeMode='contain'
        source={require('@images/swoosh-02.png')}
    />
</View>

the image gets successfully contained horizontally, but the height of the parent element remains the same as it was when resizeMode was cover.

enter image description here

How can I get it so that the parent element shrinks vertically to contain only the image and not have that extra top/bottom padding?

gkeenley
  • 6,088
  • 8
  • 54
  • 129

1 Answers1

1

De diference between contain and cover is :

resizeMode='contain' = Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

resizeMode='cover' = Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

Maybe you should try to apply height in your View.

Read this article, should help you.

Olavo Mello
  • 492
  • 2
  • 8