Image not displayed properly

Question

This is how I'm showing my image in React-Native:

<View>
    <Text style={styles.myTitle}> This is the title 2 </Text> 
    <Image
      style={{ width: null}} 
      source={require('./images/05.jpg')}
      resizeMode="stretch"
    />
</View>

With the resizeMode="stretch" The Image is shown like this:

The same image when displayed with resizeMode="contain" :

<View>
    <Text style={styles.myTitle}> This is the title 3</Text> 
    <Image
      style={{ width: null}} 
      source={require('./images/05.jpg')}
      resizeMode="contain"
    />
</View>

resizeMode="contain":

I want the image to be displayed like how it is in the second type, but there are unnecessary margins:

The margins in the first image are perfect but the full image is not shown. I always thought contain will take care of that but it's not helping here. All I want is the entire image to be shown without any extra margins.

Please help. Thanks.

Seems like an aspect ratio issue here, `contain` would otherwise work perfectly if the image was the exact proportions of the containing element it needs to cover. — UncaughtTypeError, Aug 03 '17 at 09:06
I think you have to chose between either cropping or stretching. — I haz kode, Aug 03 '17 at 09:19
@Ihazkode isn't there any way I can show the entire image without having to crop/stretch? I'm ok with stretch but why is it showing only some part of it? — Somename, Aug 03 '17 at 10:18
When you stretch the image there wouldn't be any cropping. The entire image will be there, it will just be distorted. I don't think there's any other way around it. The image in your example has Landscape aspect ratio and the device viewer in your example has Portrait aspect ratio. — I haz kode, Aug 03 '17 at 10:22
Here, check this out https://jsfiddle.net/ewtrt0xr/ #1 is stretch #2 is crop and #3 is contain — I haz kode, Aug 03 '17 at 10:32
The only way I can think of is to use negative `bottom-margin` with the contain technique — I haz kode, Aug 03 '17 at 10:34
Or create an image that matches the aspect ratio of your intended use — I haz kode, Aug 03 '17 at 10:51
When you say the device viewer in my ex has Portrait AR, can I use some flex prop to make it adjust it? If yes, how? thanks for your time mate. — Somename, Aug 03 '17 at 11:40
There's isn't anything you can do about the device aspect ratio. I can assume from the photos in your example that you're target devices are mobile screens. Mobile screens have more height than width (portrait) That's just the way they physically are. They only way to make a mobile screen change its aspect ratio is to tun the device sideways and trigger screen rotation. Can you post the actual image you want to add in your project instead of a placeholder? — I haz kode, Aug 03 '17 at 13:02
Sorry, was driving so couldn't reply. Actually, the images vary in size. I have no problem with a Portrait size image, its only the Landscapes that are not displaying properly. I tried with a `FlatList` and 'ListView', not sure how to set `flexbox` or any other property. The images are called with a `Fetch`. (Sorry for grammatical mistakes) — Somename, Aug 03 '17 at 13:45

score 0 · Answer 1 · answered Aug 03 '17 at 09:27

0

You can use cover, but it will crop part of the image.

To make it work you will need to add a height property to your image:

  <View>
    <Text>This is the title 3</Text>
    <Image
      style={{ width: null, height: '100%' }}
      source={require('./image.png')}
      resizeMode="cover"
    />
  </View>

answered Aug 03 '17 at 09:27

Davis Z. Cabral

514
3
12

It's cropping the image a lot. I want to show the entire image without the additional margins. – Somename Aug 03 '17 at 10:22
That's not possible if your image does not have the same size of the screen. You can get rid of the top margin, but the blank space bellow will continue. – Davis Z. Cabral Aug 03 '17 at 22:47

Image not displayed properly

1 Answers1