iOS/Android image picker with support for 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);
});| 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 |
| 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 install react-native-image-crop-picker --save
pod 'react-native-image-crop-picker', :path => '../node_modules/react-native-image-crop-picker/ios'
// file: android/settings.gradle
...
include ':react-native-image-crop-picker'
project(':react-native-image-crop-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-crop-picker/android')// file: android/app/build.gradle
...
dependencies {
...
compile project(':react-native-image-crop-picker')
}// file: MainApplication.java
...
import com.reactnative.picker.PickerPackage; // import package
public class MainApplication extends ReactApplication {
...
/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new PickerPackage() // Add package
);
}
...
}It is basically wrapper around few libraries
- Native Image Picker
- uCrop
- QBImagePickerController
- RSKImageCropper
- Create new react native project with Pods support
react-native init picker
cd picker
npm i react-native-image-crop-picker --save
cd ios
pod init
- Inside
iosdirectory changePodfileto following
platform :ios, '8.0'
target 'picker' do
source 'https://github.com/CocoaPods/Specs.git'
pod 'React', :path => '../node_modules/react-native'
pod 'react-native-image-crop-picker', :path => '../node_modules/react-native-image-crop-picker/ios'
end
- Run
pod install
- open project_name.xcworkspace
- Add
$(inherited)to other linker flags under Build Settings
Done!
MIT