Image picker with support for Camera

react-native-image-crop-picker .iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping


Important note

If you are using react-native >= 0.60 use react-native-image-crop-picker version >= 0.25.0. Otherwise use version < 0.25.0.


Import library

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

Select from gallery

Call single image picker with cropping

  width: 300,
  height: 400,
  cropping: true
}).then(image => {

Call multiple image picker

  multiple: true
}).then(images => {

Select video only from gallery

  mediaType: "video",
}).then((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


  width: 300,
  height: 400,
  cropping: true,
}).then(image => {


  mediaType: 'video',
}).then(image => {

Crop picture

  path: 'my-file-path.jpg',
  width: 300,
  height: 400
}).then(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 => {

Request Object

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,${}}} />
includeExif bool (default false) Include image exif data in the response
avoidEmptySpaceAroundImage 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.
freeStyleCropEnabled (android only) 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
cropperCancelText (ios only) string (default Cancel) Cancel button text

Smart Album Types (ios)

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

Response Object

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


Step 1

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

Step 2


react-native >= 0.60 with cocoapods

  • Run the following:
cd ios
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


NOTE: If you are using react-native >= 0.60 autolinking, you can skip this step.

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

Post-install steps


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 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.


  • Make sure you are using Gradle >= 2.2.x (android/build.gradle)
buildscript {
    dependencies {
        classpath ''
  • VERY IMPORTANT Add the following to your build.gradle’s repositories section. (android/build.gradle)
allprojects {
    repositories {
      maven { url "$rootDir/../node_modules/react-native/android" }

      // ADD THIS
      maven { url '' }

      // ADD THIS
      maven { url "" }
  • 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:required="false" />
    • <uses-feature android:name="" android:required="false" />

Production build


Cocoapods (Highly recommended)

  • You are already done


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:

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)


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

Download Details:

Author: ivpusic


#react-native #programming

What is GEEK

Buddha Community

Image picker with support for Camera

I am Developer


Laravel 7/6 Image Validation

In this image validation in laravel 7/6, i will share with you how validate image and image file mime type like like jpeg, png, bmp, gif, svg, or webp before uploading image into database and server folder in laravel app.

#laravel image validation #image validation in laravel 7 #laravel image size validation #laravel image upload #laravel image validation max #laravel 6 image validation

Ahebwe  Oscar

Ahebwe Oscar


how to integrate CKEditor in Django

how to integrate CKEditor in Django

Welcome to my Blog, in this article we learn about how to integrate CKEditor in Django and inside this, we enable the image upload button to add an image in the blog from local. When I add a CKEditor first time in my project then it was very difficult for me but now I can easily implement it in my project so you can learn and implement CKEditor in your project easily.

how to integrate CKEditor in Django

#django #add image upload in ckeditor #add image upload option ckeditor #ckeditor image upload #ckeditor image upload from local #how to add ckeditor in django #how to add image upload plugin in ckeditor #how to install ckeditor in django #how to integrate ckeditor in django #image upload in ckeditor #image upload option in ckeditor

I am Developer


Laravel 7/6 Image Upload Example Tutorial

Laravel image upload example tutorial. Here, i will show you how to upload image in laravel 7/6 with preview and validation.

Before store image into db and folder, you can validate uploaded image by using laravel validation rules. as well as you can show preview of uploaded image in laravel.

Image Upload In Laravel 7/6 with Validation

Image upload in laravel 7/6 with preview and validation. And storage image into folder and MySQL database by using the below steps:

Install Laravel Fresh App
Setup Database Details
Generate Image Migration & Model
Create Image Upload Route
Create Image Controller
Create Image Upload and Preview Blade View
Start Development Server

#laravel 7 image upload example #laravel upload image to database #how to insert image into database in laravel #laravel upload image to storage #laravel image upload tutorial #image upload in laravel 7/6

Lane  Sanford

Lane Sanford


Preprocessing your images for machine learning (image recognition)

During my studies at JKU there was a task for preprocessing images for a machine learning project. It is necessary to clean the raw images before using them in a learning algorithm, so thats why we create a pre-processing function. I think it can be quite useful for others as well so I want to share a bit of my approach. The file is structured in a way that it is easy to understand and also should have a tutorial-like effect.

#image-recognition #image #image-classification #machine-learning #image-processing

I am Developer


Crop and Resize Image Before Upload In Laravel Using with jQuery Copper JS

Crop and resize image size before upload in laravel using jquery copper js. In this post, i will show you how to crop and resize image size in laravel using jQuery copper js in laravel.

This laravel crop image before upload using cropper js looks like:

laravel crop image before upload

Laravel Crop Image Before Uploading using Cropper js Tutorial

Laravel crop image before upload tutorial, follow the following steps and learn how to use cropper js to crop image before uploading in laravel app:

  • Step 1: Install New Laravel App
  • Step 2: Add Database Details
  • Step 3: Create Migration & Model
  • Step 4: Add Route
  • Step 5: Create Controller By Artisan
  • Step 6: Create Blade View
  • Step 7: Make Upload Directory
  • Step 8: Start Development Server


Live Demo Laravel Crop image Before Upload.

#laravel crop image before upload, #laravel crop and resize image using cropper.js #ajax image upload and crop with jquery and laravel #crop and upload image ajax jquery laravel #crop image while uploading with jquery laravel #image crop and upload using jquery with laravel ajax