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

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'

- Step By Step tutorial

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

How it works?

It is basically wrapper around few libraries

Android

Native Image Picker
uCrop

iOS

QBImagePickerController
RSKImageCropper

iOS Step by Step installation

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 ios directory change Podfile to following

platform :ios, '8.0'

target 'picker' do
    source 'https://github.com/CocoaPods/Specs.git'
    pod 'React', :subspecs => ['Core', 'RCTImage', 'RCTNetwork', 'RCTText', 'RCTWebSocket'], :path => '../node_modules/react-native'
    pod 'react-native-image-crop-picker', :path => '../node_modules/react-native-image-crop-picker/ios'
end

pod install

Add $(inherited) to other linker flags under Build Settings (XCode -> open project_name.xcworkspace)

Done!

License

MIT