React Native Image Picker

React native image picker is a module of react native for adding the functionality by which you can add any image or video from device or from camera.

With React Native Image Picker, you can allow users to choose an image from their device’s camera or gallery and then use that image in your app. The library provides a simple API for accessing the device’s camera and gallery, handling permissions, and returning the selected image to your app.

There are many libraries for this purpose we are gonna chose best between them.

Libraries for Image Picker in react native

There are many libraries but most famous are

1. react-native-image-picker
2. react-native-image-crop-picker

I personally use both of them and found the second one more easy to use and useful so today we are gonna use that for our purpose.

Installation

using npm

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

using yarn

yarn add react-native-image-crop-picker --save

For Ios

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. for ex. This app require access to your photos library.

Depending on what features you use, you also may need NSCameraUsageDescription and NSMicrophoneUsageDescription keys.

For Android

1. You need to add this code in android/build.gradle’s repository section.

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

2. Now go to your app level buid.gradle(android/app/build.gradle) and Add useSupportLibrary

android {
    ...

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

Now for using the camera and front camera you need to add this in your AndroidMenifest file (app/src/main/AndroidManifest.xml)

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

<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-feature android:name="android.hardware.camera.front" android:required="false" />

Usage of React Native Image Picker

Firstly import the library

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

Now comes two parts for the usage according to our need.

1. select from gallery
2. select from camera

1. Select from gallery

ImagePicker.openPicker({
  width: 300,
  height: 400,
  cropping: true
}).then(image => {
  console.log(image);
});

2. select from Camera

ImagePicker.openCamera({
  width: 300,
  height: 400,
  cropping: true,
}).then(image => {
  console.log(image);
});

Important useful Properties (props)

Now comes the most important part. For implementing this we need to use all important props according to our need. So some important once are here.

1. Cropping – for enable cropping make it true.
2. multiple – if you want to add multiple images then make it true.
3. useFrontCamera – if you want to use front camera as default than make it true.
4. mediaType – It is the type of media which you want to pick it’s values are ‘photo’, ‘video’ or ‘any’.

These are some of the most used and important props. If you have other requirement just tell me in the comments.

Response Object syntax

The response which we get is like this

• path – Selected image location. This is null when the writeTempFile option is set to false.
• width
• height
• size
• duration
• data
• cropRect

React Native Image Picker provides many configuration options, including the ability to specify the image quality, the cropping mode, and the allowed media types. You can find more information about these options in the library’s documentation.