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
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 ivpusic#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
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4