react-native-image-crop-picker

iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping

Result

Usage

Import library

import ImagePicker from 'react-native-image-crop-picker';

Select from gallery

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 video only from gallery

ImagePicker.openPicker({   mediaType: "video", }).then((video) => {   console.log(video); });

Android: The prop 'cropping' has been known to cause videos not to be display in the gallery on Android. Please do not set cropping to true when selecting videos.

Select from camera

Image

ImagePicker.openCamera({   width: 300,   height: 400,   cropping: true, }).then(image => {   console.log(image); });

Video

ImagePicker.openCamera({   mediaType: 'video', }).then(image => {   console.log(image); });

Crop picture

ImagePicker.openCropper({   path: 'my-file-path.jpg',   width: 300,   height: 400 }).then(image => {   console.log(image); });

Optional cleanup

Module is creating tmp images which are going to be cleaned up automatically somewhere in the future. If you want to force cleanup, you can use clean to clean all tmp files, or cleanSingle(path) to clean single tmp file.

ImagePicker.clean().then(() => {   console.log('removed all tmp images from tmp directory'); }).catch(e => {   alert(e); });

Request Object

Smart Album Types (ios)

['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure'] 

Response Object

Install

Step 1

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

Step 2

iOS

- If you use Cocoapods which is highly recommended:

cd ios pod init

After this edit Podfile. Example content is following:

platform :ios, '8.0'  target '<project_name>' do   # this is very important to have!   rn_path = '../node_modules/react-native'   pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"   pod 'React', path: rn_path, subspecs: [     'Core',     'RCTActionSheet',     'RCTAnimation',     'RCTGeolocation',     'RCTImage',     'RCTLinkingIOS',     'RCTNetwork',     'RCTSettings',     'RCTText',     'RCTVibration',     'RCTWebSocket'   ]    pod 'RNImageCropPicker', :path =>  '../node_modules/react-native-image-crop-picker' end  # very important to have, unless you removed React dependencies for Libraries  # and you rely on Cocoapods to manage it post_install do |installer|   installer.pods_project.targets.each do |target|     if target.name == "React"       target.remove_from_project     end   end end

After this run:

pod install

After this use ios/<project_name>.xcworkspace. Do not use ios/<project_name>.xcodeproj.

- If you are not using Cocoapods which is not recommended:

react-native link react-native-image-crop-picker

Android

react-native link react-native-image-crop-picker

Post-install steps

iOS

Step 1

In Xcode open Info.plist and add string key NSPhotoLibraryUsageDescription with value that describes why you need access to user photos. More info here https://forums.developer.apple.com/thread/62229. Depending on what features you use, you also may need NSCameraUsageDescription and NSMicrophoneUsageDescription keys.

Step 2

Only if you are not using Cocoapods

• 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

Step Optional - To localizate the camera / gallery text buttons

• Open your Xcode project
• Go to your project settings by opening the project name on the Navigation (left side)
• Select your project in the project list
• Should be into the Info tab and add in Localizations the language your app was missing throughout the +
• Rebuild and you should now have your app camera and gallery with the classic ios text in the language you added.

Android

• Make sure you are using Gradle >= 2.2.x (android/build.gradle)

buildscript {     ...     dependencies {         classpath 'com.android.tools.build:gradle:2.2.3'         ...     }     ... }

• VERY IMPORTANT Add the following to your build.gradle's repositories section. (android/build.gradle)

allprojects {     repositories {       mavenLocal()       jcenter()       maven { url "$rootDir/../node_modules/react-native/android" }        // ADD THIS       maven { url 'https://maven.google.com' }        // ADD THIS       maven { url "https://jitpack.io" }     } }

• Add useSupportLibrary (android/app/build.gradle)

android {     ...      defaultConfig {         ...         vectorDrawables.useSupportLibrary = true         ...     }     ... }

• Use Android SDK >= 26 (android/app/build.gradle)

android {     compileSdkVersion 27     buildToolsVersion "27.0.3"     ...          defaultConfig {       ...       targetSdkVersion 27       ...     }     ... }

• [Optional] If you want to use camera picker in your project, add following to app\src\main\AndroidManifest.xml

  • <uses-permission android:name="android.permission.CAMERA"/>

• [Optional] If you want to use front camera, also add following to app\src\main\AndroidManifest.xml

  • <uses-feature android:name="android.hardware.camera" android:required="false" />
  • <uses-feature android:name="android.hardware.camera.front" android:required="false" />

Production build

iOS

Cocoapods (Highly recommended)

• You are already done

Manual

If you are using pre-built frameworks from ios/ImageCropPickerSDK, then before deploying app to production you should strip off simulator ARCHs from these, or you can add frameworks from Libraries/imageCropPicker/Libraries/_framework_name_.xcodeproj/Products/_framework_name_.framework to Embedded Binaries instead of pre-built ones. Related issue: https://github.com/ivpusic/react-native-image-crop-picker/issues/61.

Details for second approach:

1. Remove the pre-built frameworks from Embedded Binaries
2. Build for Device
3. Add the newly built binaries for both frameworks to Embedded Binaries (located at Libraries/imageCropPicker/Libraries/_framework_name_.xcodeproj/Products/_framework_name_.framework)

TO DO

• [Android] Standardize multiple select
• [Android] Video compression

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

License

MIT