2

Somehow I could not figure this out. I have tried several solutions available online, but none of them worked.

Here is the issue. I have some wide images that I wanted to stack on top of each other. The height does not matter, but I want it to have a fixed width. For some reason, the images are being cropped.

I want it to look like this. For example, if you change .meat's height to 10px, it will resize but will maintain its ratio.

http://jsfiddle.net/iggyfiddle/mtL7e2jz/

This is the image code:

  {items.map((item, index) =>
    <View key={index}>
      <View style={styles.imageWrapper}>
        { item.image_url_large && <Image style={styles.image} resizeMode='cover' source={{ uri: item.image_url_large }} /> }
      </View>
    </View>
  )}

It is mapping over an array of several images.

I have tried:

a simple

const styles = { image: { height: 100 }, };

I tried following the same pattern on the fiddle, by giving it fixed height and width according to this SO post

const styles = {
  imageWrapper: {
    height: 50,
    width: 400
  },
  image: {
    height: '100%'
  },
};

But it still crops the top bun and tomato

attempt2

I have tried some solutions described on this GH discussion but they don't seem to work.

How can I automatically resize the image from web to fixed width without it being cropped?

Iggy
  • 4,335
  • 8
  • 43
  • 74

1 Answers1

1

use resizeMode='contain' instead of cover and specify the width and height.

<Image
   style={{width:300,height:300}}
   source={{ uri: display_image_small }}
   resizeMode='contain'>
</Image>
Sricharan Kambhammettu
  • 270
  • 1
  • 7