JSPM

  • Created
  • Published
  • Downloads 125321
  • Score
    100M100P100Q172883F
  • License MIT

Select single or multiple images, with croping option

Package Exports

  • react-native-image-crop-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-image-crop-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-image-crop-picker

iOS/Android image picker with support for multiple images and cropping

NOTE: This library is result of one-night hacking, so please use it with caution. Don't assume there are no bugs. It is tested just on simple cases.

Result

iOS

Android

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);
});

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

Install

npm install react-native-image-crop-picker --save

iOS

pod 'react-native-image-crop-picker', :path => '../node_modules/react-native-image-crop-picker/ios'

Android

// 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: MainActivity.java
...

import com.reactnative.picker.PickerPackage; // import package

public class MainActivity extends ReactActivity {

   /**
   * 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
        );
    }
...
}

How it works?

It is basically wrapper around few libraries

Android

  • Native Image Picker
  • uCrop

iOS

  • QBImagePickerController
  • RSKImageCropper

License

MIT