CODEWITHSUNDEEP
reactjsreact-nativereact-native-image
Jaroslaw K.
Jaroslaw K.

Reputation: 5374

How to display specific part of image in square

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.

Upvotes: 4

Views: 6941

Answers (3)

syjsdev
syjsdev

Reputation: 1336

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

this is the ref image of this code

Upvotes: 5

Antonio Pellegrini
Antonio Pellegrini

Reputation: 374

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>

Upvotes: 2

S Henry
S Henry

Reputation: 150

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

Upvotes: 2

Related Questions