iOS/Android image picker with support for camera, multiple images and cropping
Import library
import ImagePicker from 'react-native-image-crop-picker';
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);
});
ImagePicker.openCamera({
width: 300,
height: 400,
cropping: true
}).then(image => {
console.log(image);
});
Module is creating tmp images which are going to be cleaned up automatically somewhere in the future. If you want to force cleanup, you can use clean
to clean all tmp files, or cleanSingle(path)
to clean single tmp file.
ImagePicker.clean().then(() => {
console.log('removed all tmp images from tmp directory');
}).catch(e => {
alert(e);
});
Property | Type | Description |
---|---|---|
cropping | bool (default false) | Enable or disable cropping (Android Cropping sometimes crashes :( ) |
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 |
resizeMultiple | bool (default false) | Resize the data of the base64 file in the Response Object to the specified height and width for multi-select |
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 |
npm i react-native-image-crop-picker --save
react-native link react-native-image-crop-picker
- Add
platform :ios, '8.0'
to Podfile (!important) - Add
pod 'RSKImageCropper'
andpod 'QBImagePickerController'
to Podfile
- 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
- [Optional] If you want to use camera picker in your project, add following to
AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA"/>
- You are already done
If you are using pre-built frameworks from ios/ImageCropPickerSDK
, then before deploying app to production you should strip off simulator ARCHs from these, or you can add frameworks from Libraries/imageCropPicker/Libraries/_framework_name_.xcodeproj/Products/_framework_name_.framework
to Embedded Binaries instead of pre-built ones.
Related issue: ivpusic#61.
Details for second approach:
- Remove the pre-built frameworks from
Embedded Binaries
- Build for Device
- Add the newly built binaries for both frameworks to
Embedded Binaries
(located atLibraries/imageCropPicker/Libraries/_framework_name_.xcodeproj/Products/_framework_name_.framework
)
It is basically wrapper around few libraries
- Native Image Picker
- uCrop
- QBImagePickerController
- RSKImageCropper
MIT