walmartlabs / React Native Cropping
Licence: mit
Cropping components for react-native
Stars: ✭ 70
Programming Languages
javascript
184084 projects - #8 most used programming language
NOTICE:
This repository has been archived and is not supported.
React Native Cropping Components
This library provides two components CroppingView
and CroppedImage
that allow you to crop views and to provide cropped images.
Installation
npm install react-native-cropping --save
Obligatory Demo
CroppingView
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>
CroppedImage
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" />
Example Code
There is some sample code provided.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].