How to display specific part of image in square

Question

I have problem with Image component in react native. I would like to display specific part of image in some square. F.e:

Let's say, I have image in resolution: 1280x720

private someImage = require('../Assets/someImage.jpg');

I would like to display this image in square component (with constant size)

<View style={{width: 64, height: 64}}>
   <Image source={this.someImage}
          style={{position: 'absolute', top: 0, left: 0 }} />
</View>

Here comes the first problem: Image goes beyond the square. How can I show only part of my image (but with original resolution).

The second question is: Is there a way to showing specific fragment of my image? That's men if I set top: -64, left: -64 I would like to see original image move about 64 pixels diagonally.

syjsdev · Accepted Answer · 2019-09-23T15:28:41.063

Jroslaw. this may helpful for you.

const someImage = require('../Assets/someImage.jpg');

class ImageClip extends Components {
  ...
    render() {
        return (
          ...
            <View style={{ width: 64, height: 64, overflow: 'hidden' }}> // width and height of image you want display.
                <Image
                    source={someImage}
                    style={{
                        top: 24,
                        left: 32,
                    }} //position of image you want display.
                />
            </View>
          ...
        );
    }
}

score 2 · Answer 2 · answered Sep 23 '19 at 13:46

2

To show your image with full resolution but with only the section you choose, you will need to display the image within a fixed sized container. This image will also need to be a background-image in the style attribute.

<View style={{background-image: this.someImage, background-position-x: -64px, background-position-y: -64px}}>

answered Sep 23 '19 at 13:46

S Henry

150
5

"background-position-x" is not a style option – 219CID Jan 08 '23 at 19:42

score 2 · Answer 3 · answered Sep 23 '19 at 13:50

Giving " overflow:'hidden' " to the parent view also works for me. Resize-mode:contain will NOT work, as it will resize your image to fit entirely within the 64x64 container, not what you want in this case.

        <View style={{width: 64, height: 64, overflow: 'hidden'}}>
          <Image
            source={{uri: 'https://picsum.photos/200/300'}}
            style={{
              height: 200,
              width: 200,
              top: -50,
              left: -70,
            }}
          />
        </View>

why are there negative top and left values? – 219CID Jan 08 '23 at 19:25 — 219CID, Jan 08 '23 at 19:25

How to display specific part of image in square

3 Answers3

Linked