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.

Answer 1

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>
          ...
        );
    }
}

Answer 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}}>