CODEWITHSUNDEEP
javascriptandroidiosreactjsreact-native
Sivart
Sivart

Reputation: 191

React Native oversized image positioning

I have two images that I would like to place abutted horizontally using React Native. I would like to control the percentage of the screen consumed by each image relative to the other. Together the images will be larger than the available horizontal screen space. I would like to maintain their original dimensions and simply have them cropped at the edge of the screen.

Here is a quick mockup of how I would like the two images to appear, with the additional parts of the images shown extending beyond the screen being cropped:

enter image description here

I've tried various approaches, but nothing seems to work. Any ideas would be much appreciated.

EDIT One approach, which is that suggested by https://stackoverflow.com/users/7016280/jhack, is as follows:

<View style={{flex: 1, flexDirection: 'row'}}>
  <Image style={{width:200}}
    source={require('./image.jpg')}
  />
  <Image style={{width:175}}
    source={require('./image.jpg')}
  />
</View>

This produces: enter image description here

Which achieves the abutting of the two images, allows control over the percentage of the screen consumed by each image relative to the other, maintains their dimensions, and crops them at the edge of the screen. However both images are centred within their region of the screen, and the width of the screen consumed by each image must be explicitly set as a value and not a flex (relative) amount.

Solution

The following appears to produce the desired result, but I'm not sure if it's the best solution:

<View style={{flex: 1, flexDirection: 'row'}}>
  <Image style={{width:1000, transform: [{translateX: -700}]}}
    source={require('./image.jpg')} />
  <Image style={{width:1000, transform: [{translateX: -700}]}}
    source={require('./image.jpg')} />
</View>

The image in the example is 1000 wide, and the "translateX: -700" results in the left image consuming 300 and the right image the remainder.

Upvotes: 0

Views: 663

Answers (2)

Aavgeen singh
Aavgeen singh

Reputation: 443

Just use flex:1 in the image's style

<View style={{flex: 1, flexDirection: 'row'}}>
  <Image style={{flex: 1}}
    source={require('./image.jpg')} />
  <Image style={{flex: 1}}
    source={require('./image.jpg')} />
</View>

Upvotes: 1

jhack
jhack

Reputation: 81

Have you tried this:

Setting the width/height of the images and use flex: 1, flexDirection: 'row' (on the View that wraps the image) to align the Images next to each other. Just doing flexDirection: 'row' would align the items horizontally. You would need to adjust the width/heigh so that the image doesn't take up the full screen.

Let me know how that goes

EDIT: Instead, of setting width, maybe you can use left and right to move the left image to the left 50% and the right image to move right 50%?

Upvotes: 0

Related Questions