iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping
Go to file
Ivan Pusic 1b08b6046f (iOS) Added BITCODE_GENERATION_MODE = bitcode to frameworks 2016-09-06 20:36:00 +02:00
android (iOS) Added pre-built framework dependencies 2016-09-02 14:18:32 +02:00
example (iOS) Added BITCODE_GENERATION_MODE = bitcode to frameworks 2016-09-06 20:36:00 +02:00
images docs cleanup 2016-08-26 01:48:45 +02:00
ios (iOS) Added BITCODE_GENERATION_MODE = bitcode to frameworks 2016-09-06 20:36:00 +02:00
.gitignore [ANDROID] show only local files 2016-07-24 01:17:43 +02:00
.npmignore [Android] Before publishing remove android/build 2016-07-30 20:10:33 +02:00
ISSUE_TEMPLATE.md Create ISSUE_TEMPLATE.md 2016-08-26 13:26:11 +02:00
README.md (iOS) Added pre-built framework dependencies 2016-09-02 14:18:32 +02:00
index.js first commit 2016-05-18 12:07:36 +02:00
package.json (iOS) Added BITCODE_GENERATION_MODE = bitcode to frameworks 2016-09-06 20:36:00 +02:00

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';

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 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