This library provides two components CroppingView
and CroppedImage
that allow you to crop views and to provide cropped images.
npm install react-native-cropping --save
Cropping view crops the child elements. It takes four props:
Property | Description |
---|---|
cropTop |
The cropping top coordinate |
cropLeft |
The cropping left coordinate |
width |
The width of the cropped area |
height |
The height of the cropped area |
The width of the CroppingView
is the width
plus the cropLeft
. And
the height is the height
put the cropTop
value.
In the demo the size of CroppingView
when cropped is this:
The can be animated as shown in the example using AnimatedLayout
.
Here is a code sample:
<CroppingView
cropTop={50}
cropLeft={50}
width={200}
height={300}
style={{
borderRadius: 5
}}>
<Image
source={require('image!alien')}
style={{
width: 350,
height: 526
}}
resizeMode="contain" />
</CroppingView>
Cropped image crops an image. It takes these props:
Property | Description |
---|---|
cropTop |
The cropping top coordinate |
cropLeft |
The cropping left coordinate |
cropWidth |
The width of the cropped area |
cropHeight |
The height of the cropped area |
source |
The source of the image |
resizeMode |
The image resize mode |
width |
The image height |
height |
The image width |
The resultant image is sized to the cropWidth
and cropHeight
.
In the example the image is sized to the cropping area.
Here is a pretty simple example:
<CroppedImage
source={require('image!alien')}
cropTop={110}
cropLeft={75}
cropWidth={190}
cropHeight={250}
width={350}
height={526}
resizeMode="contain" />
There is some sample code provided.