Home

Awesome

react-native-image-crop-picker

Backers on Open Collective Sponsors on Open Collective

<img src="svg.svg" width="50%" height="50%" />

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

Result

<p align="left"> <img width=200 title="iOS Single Pick" src="https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_single_pick_v2.png"> <img width=200 title="iOS Multiple Pick" src="https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_multiple_pick_v2.png"> <img width=200 title="iOS Crop Normal" src="https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_normal_crop.png"> <img width=200 title="iOS Crop Circular" src="https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_circular_crop.png"> </p>

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

PropertyTypeDescription
croppingbool (default false)Enable or disable cropping
widthnumberWidth of result image when used with cropping option
heightnumberHeight of result image when used with cropping option
multiplebool (default false)Enable or disable multiple image selection
writeTempFile (ios only)bool (default true)When set to false, does not write temporary files for the selected images. This is useful to improve performance when you are retrieving file contents with the includeBase64 option and don't need to read files from disk.
includeBase64bool (default false)When set to true, the image file content will be available as a base64-encoded string in the data property. Hint: To use this string as an image source, use it like: <Image source={{uri: `data:${image.mime};base64,${image.data}`}} />
includeExifbool (default false)Include image exif data in the response
avoidEmptySpaceAroundImage (ios only)bool (default true)When set to true, the image will always fill the mask space.
cropperActiveWidgetColor (android only)string (default "#424242")When cropping image, determines ActiveWidget color.
cropperStatusBarColor (android only)string (default #424242)When cropping image, determines the color of StatusBar.
cropperToolbarColor (android only)string (default #424242)When cropping image, determines the color of Toolbar.
cropperToolbarWidgetColor (android only)string (default darker orange)When cropping image, determines the color of Toolbar text and buttons.
freeStyleCropEnabledbool (default false)Enables user to apply custom rectangle area for cropping
cropperToolbarTitlestring (default Edit Photo)When cropping image, determines the title of Toolbar.
cropperCircleOverlaybool (default false)Enable or disable circular cropping mask.
disableCropperColorSetters (android only)bool (default false)When cropping image, disables the color setters for cropping library.
minFiles (ios only)number (default 1)Min number of files to select when using multiple option
maxFiles (ios only)number (default 5)Max number of files to select when using multiple option
waitAnimationEnd (ios only)bool (default true)Promise will resolve/reject once ViewController completion block is called
smartAlbums (ios only)array (supported values) (default ['UserLibrary', 'PhotoStream', 'Panoramas', 'Videos', 'Bursts'])List of smart albums to choose from
useFrontCamerabool (default false)Whether to default to the front/'selfie' camera when opened. Please note that not all Android devices handle this parameter, see issue #1058
compressVideoPreset (ios only)string (default MediumQuality)Choose which preset will be used for video compression
compressImageMaxWidthnumber (default none)Compress image with maximum width
compressImageMaxHeightnumber (default none)Compress image with maximum height
compressImageQualitynumber (default 1 (Android)/0.8 (iOS))Compress image with quality (from 0 to 1, where 1 is best quality). On iOS, values larger than 0.8 don't produce a noticeable quality increase in most images, while a value of 0.8 will reduce the file size by about half or less compared to a value of 1.
loadingLabelText (ios only)string (default "Processing assets...")Text displayed while photo is loading in picker
mediaTypestring (default any)Accepted mediaType for image selection, can be one of: 'photo', 'video', or 'any'
showsSelectedCount (ios only)bool (default true)Whether to show the number of selected assets
sortOrder (ios only)string (default 'none', supported values: 'asc', 'desc', 'none')Applies a sort order on the creation date on how media is displayed within the albums/detail photo views when opening the image picker
forceJpg (ios only)bool (default false)Whether to convert photos to JPG. This will also convert any Live Photo into its JPG representation
showCropGuidelines (android only)bool (default true)Whether to show the 3x3 grid on top of the image during cropping
showCropFrame (android only)bool (default true)Whether to show crop frame during cropping
hideBottomControls (android only)bool (default false)Whether to display bottom controls
enableRotationGesture (android only)bool (default false)Whether to enable rotating the image by hand gesture
cropperChooseText (ios only)           string (default choose)        Choose button text
cropperChooseColor (ios only)string (default #FFCC00)HEX format color for the Choose button. Default color is controlled by TOCropViewController.
cropperCancelText (ios only)string (default Cancel)Cancel button text
cropperCancelColor (ios only)string (default tint iOS color )HEX format color for the Cancel button. Default value is the default tint iOS color controlled by TOCropViewController
cropperRotateButtonsHidden (ios only)           bool (default false)        Enable or disable cropper rotate buttons

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

PropertyTypeDescription
pathstringSelected image location. This is null when the writeTempFile option is set to false.
localIdentifier(ios only)stringSelected images' localidentifier, used for PHAsset searching
sourceURL(ios only)stringSelected images' source path, do not have write access
filename(ios only)stringSelected images' filename
widthnumberSelected image width
heightnumberSelected image height
mimestringSelected image MIME type (image/jpeg, image/png)
sizenumberSelected image size in bytes
durationnumberVideo duration time in milliseconds
database64Optional base64 selected file representation
exifobjectExtracted exif data from image. Response format is platform specific
cropRectobjectCropped image rectangle (width, height, x, y)
creationDate (ios only)stringUNIX timestamp when image was created
modificationDatestringUNIX timestamp when image was last modified

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

Android

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" }
    }
}
android {
    ...

    defaultConfig {
        ...
        vectorDrawables.useSupportLibrary = true
        ...
    }
    ...
}
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

TO DO

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