react-native-image-crop
v1.0.2
Published
Crop images with React Native
Downloads
10
Maintainers
Readme
react-native-image-crop
Image crop editor component for iOS and Android. Move the image in the area and crop it.
Installation
This component is dependent of react-native-image-resizer
(See Github) which needs to be installed and linked to your project before.
If you don't have rnpm
installed on your computer, install it first:
npm install -g rnpm
Then, install and link the peer dependency:
npm install --save react-native-image-resizer
rnpm link
Now you can install this component
npm install --save react-native-image-crop
Usage
Import the component into the file you want to use it:
import ImageCrop from 'react-native-image-crop';
Use the component directly in your code. The component will automatically fit the parent view.
<View>
<ImageCrop
ref={(c) => { this.imageCrop = c; }}
cropWidth={500}
cropHeight={500}
image={{
uri: 'https://c1.staticflickr.com/9/8073/28582653114_d154039cb9_k.jpg',
}}
/>
</View>
To crop the image, you can call the method crop()
from the component
onButtonPress() {
this.imageCrop.crop().then((uri) => {
// uri contains the cropped image
});
}
Note: If you use a large image, you might need to preload it before using this component.
Properties
| Property | Type | Description |
|--- |--- |--- |
| image
| ImageSource https://facebook.github.io/react-native/docs/image.html#source | Source of the image. This property is mandatory |
| containerPaddingLeft
| Number | Apply padding on the left of the image Default: 20 |
| containerPaddingRight
| Number | Apply padding on the right of the image Default: 20 |
| containerPaddingTop
| Number | Apply padding at the top of the image Default: 20 |
| containerPaddingBottom
| Number | Apply padding at the bottom of the image Default: 20 |
| cropWidth
| Number | Enforce the cropped width of the image. This property must be used with cropHeight
|
| cropHeight
| Number | Enforce the cropped height of the image. This property must be used with cropWidth
|
| cropQuality
| Number | Image quality, from 0 to 100 Default: 80 |
Methods
| Method | Description | Example |
|--- |--- |--- |
| crop()
| Crop and, if necessary, resize the image. This method returns a Promise. | this.imageCrop.crop().then((uri) => { this.setState({ uri })})
|
Todo
- Pinch and zoom. Add new properties
defaultZoom
,minZoom
,maxZoom