react-native-image-crop-picker
Advanced tools
The react-native-image-crop-picker package is a powerful library for React Native that allows users to select images and videos from the device's library or directly from the camera. It also provides functionalities for cropping, compressing, and editing images.
Image Picker
This feature allows users to pick an image from their device's library. The `openPicker` method opens the image library, and the `cropping` option enables the cropping tool.
import ImagePicker from 'react-native-image-crop-picker';
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true
}).then(image => {
console.log(image);
});Camera Picker
This feature allows users to capture an image using the device's camera. The `openCamera` method opens the camera interface, and the `cropping` option enables the cropping tool.
import ImagePicker from 'react-native-image-crop-picker';
ImagePicker.openCamera({
width: 300,
height: 400,
cropping: true
}).then(image => {
console.log(image);
});Cropping
This feature allows users to crop an existing image. The `openCropper` method opens the cropping tool for the specified image path.
import ImagePicker from 'react-native-image-crop-picker';
ImagePicker.openCropper({
path: 'path-to-image',
width: 300,
height: 400
}).then(image => {
console.log(image);
});Multiple Image Selection
This feature allows users to select multiple images from their device's library. The `multiple` option enables the selection of multiple images.
import ImagePicker from 'react-native-image-crop-picker';
ImagePicker.openPicker({
multiple: true
}).then(images => {
console.log(images);
});Video Picker
This feature allows users to pick a video from their device's library. The `mediaType` option set to 'video' enables video selection.
import ImagePicker from 'react-native-image-crop-picker';
ImagePicker.openPicker({
mediaType: 'video'
}).then(video => {
console.log(video);
});The react-native-image-picker package provides similar functionalities for selecting images and videos from the device's library or camera. It is simpler to use but lacks some advanced features like cropping and multiple image selection that react-native-image-crop-picker offers.
The react-native-camera package is a comprehensive library for accessing the device's camera. It provides functionalities for capturing photos and videos, scanning barcodes, and more. However, it does not offer image cropping or library selection features.
The expo-image-picker package is part of the Expo ecosystem and provides functionalities for selecting images and videos from the device's library or camera. It is easy to integrate with Expo projects but lacks some advanced features like cropping and compression available in react-native-image-crop-picker.
iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping
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);
});
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.
ImagePicker.openCamera({
width: 300,
height: 400,
cropping: true,
}).then(image => {
console.log(image);
});
ImagePicker.openCamera({
mediaType: 'video',
}).then(image => {
console.log(image);
});
ImagePicker.openCropper({
path: 'my-file-path.jpg',
width: 300,
height: 400
}).then(image => {
console.log(image);
});
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);
});
| Property | Type | Description |
|---|---|---|
| cropping | bool (default false) | Enable or disable cropping |
| width | number | Width of result image when used with cropping option |
| height | number | Height of result image when used with cropping option |
| multiple | bool (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. |
| includeBase64 | bool (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}`}} /> |
| includeExif | bool (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. |
| freeStyleCropEnabled | bool (default false) | Enables user to apply custom rectangle area for cropping |
| cropperToolbarTitle | string (default Edit Photo) | When cropping image, determines the title of Toolbar. |
| cropperCircleOverlay | bool (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 |
| useFrontCamera | bool (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 |
| compressImageMaxWidth | number (default none) | Compress image with maximum width |
| compressImageMaxHeight | number (default none) | Compress image with maximum height |
| compressImageQuality | number (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 |
| mediaType | string (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 |
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']
| Property | Type | Description |
|---|---|---|
| path | string | Selected image location. This is null when the writeTempFile option is set to false. |
| localIdentifier(ios only) | string | Selected images' localidentifier, used for PHAsset searching |
| sourceURL(ios only) | string | Selected images' source path, do not have write access |
| filename(ios only) | string | Selected images' filename |
| 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 |
| duration | number | Video duration time in milliseconds |
| data | base64 | Optional base64 selected file representation |
| exif | object | Extracted exif data from image. Response format is platform specific |
| cropRect | object | Cropped image rectangle (width, height, x, y) |
| creationDate (ios only) | string | UNIX timestamp when image was created |
| modificationDate | string | UNIX timestamp when image was last modified |
npm i react-native-image-crop-picker --save
cd ios
pod install
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.
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" }
}
}
useSupportLibrary (android/app/build.gradle)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
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" />This project exists thanks to all the people who contribute. [Contribute].
Thank you to all our backers! 🙏 [Become a backer]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
MIT
FAQs
Select single or multiple images, with cropping option
We found that react-native-image-crop-picker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.