mirror of
https://github.com/status-im/react-native-image-crop-picker.git
synced 2025-02-18 16:46:28 +00:00
react-native-image-crop-picker
iOS/Android image picker with support for camera, multiple images and cropping
Result
![iOS Single Pick](https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_single_pick.png)
![iOS Crop](https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_crop.png)
![iOS Multiple Pick](https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_multiple_pick.png)
Usage
Import library
import ImagePicker from 'react-native-image-crop-picker';
Select from gallery
Call single image picker with cropping
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true
}).then(image => {
console.log(image);
});
Call multiple image picker
ImagePicker.openPicker({
multiple: true
}).then(images => {
console.log(images);
});
Select from camera
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
setDeployment Target
to8.0
- Under
Embedded Binaries
click+
and addRSKImageCropper.framework
andQBImagePicker.framework
- Under
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
Languages
Objective-C
64%
Java
29.5%
JavaScript
4.4%
Ruby
1.3%
Starlark
0.8%