react-native-image-crop-picker/README.md

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

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

• Run

pod install

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

Done!

License

MIT