react-native-image-crop-picker
Version:
Select single or multiple images, with croping option
106 lines (82 loc) • 3.06 kB
Markdown
# react-native-image-crop-picker
iOS/Android image picker with support for camera, multiple images and cropping
## Result
<img width=200 title="iOS Single Pick" src="https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_single_pick.png">
<img width=200 title="iOS Crop" src="https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_crop.png">
<img width=200 title="iOS Multiple Pick" src="https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_multiple_pick.png">
## Usage
Import library
```javascript
import ImagePicker from 'react-native-image-crop-picker';
```
#### Select from gallery
Call single image picker with cropping
```javascript
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true
}).then(image => {
console.log(image);
});
```
Call multiple image picker
```javascript
ImagePicker.openPicker({
multiple: true
}).then(images => {
console.log(images);
});
```
#### Select from camera
```javascript
ImagePicker.openCamera({
width: 300,
height: 400,
cropping: true
}).then(image => {
console.log(image);
});
```
#### Request Object
| Property | Type | Description |
| ------------- |:-------------:| :-----|
| cropping | bool (default false) | Enable or disable cropping |
| width | number | Width of result image when used with `cropping` option |
| height | number | Height of result image when used with `cropping` option |
| multiple | bool (default false) | Enable or disable multiple image selection |
| includeBase64 | bool (default false) | Enable or disable returning base64 data with image |
| maxFiles (ios only) | number (default 5) | Max number of files to select when using `multiple` option |
#### Response Object
| Property | Type | Description |
| ------------- |:-------------:| :-----|
| path | string | Selected image location |
| width | number | Selected image width |
| height | number | Selected image height |
| mime | string | Selected image MIME type (image/jpeg, image/png) |
| size | number | Selected image size in bytes |
| data | base64 | Optional base64 selected file representation |
## Install
```
npm i react-native-image-crop-picker --save
react-native link react-native-image-crop-picker
```
#### Post-install steps
##### iOS
- Drag and drop the ios/ImageCropPickerSDK folder to your xcode project. (Make sure Copy items if needed IS ticked)
- Click on project General tab
- Under `Deployment Info` set `Deployment Target` to `8.0`
- Under `Embedded Binaries` click `+` and add `RSKImageCropper.framework` and `QBImagePicker.framework`
##### Android
- [Optional] If you want to use camera picker in your project, add following to `AndroidManifest.xml`
- `<uses-permission android:name="android.permission.CAMERA"/>`
## How it works?
It is basically wrapper around few libraries
#### Android
- Native Image Picker
- uCrop
#### iOS
- QBImagePickerController
- RSKImageCropper
## License
*MIT*