Awesome

react-native-image-crop-picker

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

Result

Important notes

1. If you are using react-native >= 0.60 use react-native-image-crop-picker version >= 0.25.0. Otherwise use version < 0.25.0.
2. If you want to use react-native-image-crop-picker version >= 0.39.0 you have to set your android compileSdkVersion to 33 or greater. Otherwise use react-native-image-crop-picker version < 0.39.0

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

NOTE: Some of these types may not be available on all iOS versions. Be sure to check this to avoid issues.

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

cd ios
pod install

Step 3

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.

(Optional) Step 2 - To localize the camera / gallery / cropper 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

• VERY IMPORTANT Add the following to your build.gradle's repositories section and change Android SDK version to 33. (android/build.gradle)

buildscript {
    ext {
        buildToolsVersion = "31.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33
        ...
    }
}

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://www.jitpack.io" }
    }
}

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

android {
    ...

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

• Minimum Gradle version if you are using react-native-image-crop-picker >= 0.35.0

3.3.3
3.4.3
3.5.4
3.6.4
4.0.1

Reference for more details https://github.com/ivpusic/react-native-image-crop-picker/issues/1406

• If you use SDK version >= 33, add following to app/src/main/AndroidManifest.xml

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

• [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" />

TO DO

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

Contributors

This project exists thanks to all the people who contribute. [Contribute]. <a href="graphs/contributors"><img src="https://opencollective.com/react-native-image-crop-picker/contributors.svg?width=890" /></a>

Backers

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

<a href="https://opencollective.com/react-native-image-crop-picker#backers" target="_blank"><img src="https://opencollective.com/react-native-image-crop-picker/backers.svg?width=890"></a>

Sponsors

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

<a href="https://opencollective.com/react-native-image-crop-picker/sponsor/0/website" target="_blank"><img src="https://opencollective.com/react-native-image-crop-picker/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/1/website" target="_blank"><img src="https://opencollective.com/react-native-image-crop-picker/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/2/website" target="_blank"><img src="https://opencollective.com/react-native-image-crop-picker/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/3/website" target="_blank"><img src="https://opencollective.com/react-native-image-crop-picker/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/4/website" target="_blank"><img src="https://opencollective.com/react-native-image-crop-picker/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/5/website" target="_blank"><img src="https://opencollective.com/react-native-image-crop-picker/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/6/website" target="_blank"><img src="https://opencollective.com/react-native-image-crop-picker/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/7/website" target="_blank"><img src="https://opencollective.com/react-native-image-crop-picker/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/8/website" target="_blank"><img src="https://opencollective.com/react-native-image-crop-picker/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/react-native-image-crop-picker/sponsor/9/website" target="_blank"><img src="https://opencollective.com/react-native-image-crop-picker/sponsor/9/avatar.svg"></a>

License

MIT