1b08b6046f | ||
---|---|---|
android | ||
example | ||
images | ||
ios | ||
.gitignore | ||
.npmignore | ||
ISSUE_TEMPLATE.md | ||
README.md | ||
index.js | ||
package.json |
README.md
react-native-image-crop-picker
iOS/Android image picker with support for camera, multiple images and cropping
Result
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