A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handler.
npm install react-native-image-cropview@react-native-image-cropviewA React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handler.
| Android | iOS |
| --- | --- |
|
|
|
$ npm install react-native-image-cropview --save
or
$ yarn add react-native-image-cropview
$ npm install react-native-gesture-handler --save
or
$ yarn add react-native-gesture-handler
#### IOS
No additional step is required.
#### Android
No additional step is required.
Import Cropper from react-native-image-cropview:
``javascript`
import { Cropper } from 'react-native-image-cropview';
Create state which will be used to keep the image uri or import from other source
`javascript`
const [imageUri, setImageUri] = useState();
Add Cropper like this:
`javascript
{
!!imageUri && (
onDone={onCropDone}
onCancel={onCropCancel}
onReset={onReset}
getImageSize={getImageSize}
/>
)
}
`options
See Options for further information on .
If you want to call done/cancel/reset programmatically, pass ref to Cropper:
`javascript
const cropperRef = useRef();
function done() {
cropperRef.current.done();
}
function cancel() {
cropperRef.current.cancel();
}
function reset() {
cropperRef.current.reset();
}
function getImageSize() {
// Use any method to find the original image width and height
return {
width,
height
}
}
return (
uri={imageUri}
onDone={onCropDone}
onCancel={onCropCancel}
onReset={onReset}
hideFooter={true}
getImageSize={getImageSize}
/>
)
`
See Available Methods for further information.
Done callback will be called with a response object, refer to Response Object.
| Option | Required | Description |
| -------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| uri | Yes | Show the image specified by the URI param. |
| getImageSize | Yes | A method to provide the original image width and height to the cropper. Feel free to use any method to get the original image width and height; Example: https://www.npmjs.com/package/react-native-image-size
| onDone | No | Callback invoked when cropping is done |
| onCancel | No | Callback invoked on cancel |
| onReset | No | Callback invoked on cropping reset |
| aspectRatio | No | The aspect ratio of cropping area: Example: original, 4/3, 2/3, 16/9 ... |scaleMax={3}
| rounded | No | Use round cropping area |
| scaleMax | No | Maximum image scale of the image. Example: where scale scaleMax <= 20 and scaleMax >= 3` |
| hideFooter | No | Hide all the cropper actions |
For more advanced usage check our example app.