React Native Image Picker

What is React-Native-Image-Picker?

React-native-image-picker is a fantastic package that we'll use to select the picture. It is a React Native module that enables you to choose a picture or video from the camera or device library. It is very easy to understand and simple.

When selecting an image or video, you have a lot of options. For example, you can choose the maximum width and height of the image, set the quality of the image or video using quality (0–1) and videoQuality(low–high), decide the maximum duration of the video in seconds, and save the image or video file captured to public photos.

Installation

Follow the given command to install the React native image picker :

New Architecture :

To benefit from the new design, run-

IOS

Android

After Installation Procedure

In IOS :

Add the necessary keys to your Info.plist,

• Add NSPhotoLibraryUsageDescription if you want to allow users to pick images/videos from photographs.
• If you allow users to shoot images, provide the NSCameraUsageDescription key as well.
• If you allow users to capture video, provide the NSCameraUsageDescription and NSMicrophoneUsageDescription keys also.

In Android :

There is no need for authorization (saveToPhotos requires a permission check).

Please keep in mind that react native image picker library does not require Manifest.permission.CAMERA, if your app indicates that it will use this permission in the manifest, you must get it before using launchCamera.

API References

Options

mediaType, maxWidth, maxHeight, videoQuality, quality, cameraType etc.

• mediaType : 'photo', 'video', or mixed (launchCamera on Android,'mixed' is not supported). For the time being, the web only supports 'photo'.
• maxWidth : To resize the picture.
• maxHeight : To resize the picture.
• videoQuality : 'low', 'medium', or 'high' on iOS, 'low' or 'high' on Android.
• durationLimit : the maximum video duration in seconds.
• quality : 0 to 1 picture quality
• cameraType : might be 'back' or 'front'. Some Android devices may not support it.
• includeBase64 : If true, generate the picture's base64 string (avoid using on huge image files due to performance issues).
• includeExtra : If true, it will contain additional data that necessitates the request for library rights.
• saveToPhotos :  (Boolean) Only for the launchCamera, saves the collected image/video file to public picture storage.
• selectionLimit : is set to 1 by default but may be set to 0 to allow any number of files. Only iOS versions >= 14 and Android versions >= 13 support 0 and may accept any integer value.
• presentationStyle : governs how the picker is shown. 'fullScreen', 'pageSheet', 'formSheet', 'popover', 'overFullScreen', 'overCurrentContext'. 'currentContext' is the default.
• formatAsMp4 : Converts the currently chosen video to MP4, only for iOS.

Methods

• launchCamera() : Start the camera to take a picture or a video.
  For more information on options, see the options subheading above. Refer to The Response Object for more information on the callback's response object.
• launchImageLibrary : Start the gallery to choose a picture or a video.
  For more information on options, see the options subheading above. Refer to The Response Object for more information on the callback's response object.

The Response Object

• didCancel : If the user stopped the process, didCancel will be true.
• errorCode : Verify all error codes.
• errorMessage : description of the issue, only to be used for debugging.
• assets : refer to the Asset Object for the assets array of the chosen media.

Asset Object

• base64 : The image's base64 string (only for photographs)
• uri : the URL of the file in the app's cache. In this situation, transfer the file to app-specific storage using any react-native library to obtain the file uri, except choosing a movie from the Android gallery, where you will receive a read-only content uri. Base64 is used as the uri for the web.
• width : It is used to measure the width of the asset.
• height : It is used to measure the height of an asset.
• fileSize : Size of the file
• type : The kind of file
• fileName : The file's title
• duration :  The chosen video's length in seconds
• bitrate : The video's average bitrate (measured in bits per second), if one is available. (Apple only)
• timestamp : the asset's timestamp. 'includeExtra' is only utilised if it is true.
• id : local image or video identification. This is the same as fileName on Android.

Expect the camera-captured image or video to be removed at any moment because it will be kept in a temporary folder. To store the file in public photographs, use saveToPhotos: true (the default is false). On Android 28 and lower, saveToPhotos needs WRITE_EXTERNAL_STORAGE permission (you must get the permission; the library does not). For the web, this feature doesn't work.

Error Code

These are the common error code :

• camera_unavailable : The gadget does not have a camera.
• permission : Unsatisfactory authorization.

How to Use React Native Image Picker?

Base App Screen

The fundamental concept is to create an image picker component that will enable the user to upload a brand-new photo from the device's library or take the photo using the camera.

First, we'll add a new green header and background to the base app screen. Make an ImagePickerHeader component first :

We will then build a primary ImagePickerAvatar component that enables image uploading.

Here is the output :

Picking Image From Device

In this tutorial, we'll develop two options for choosing or taking a shot using a camera. To present the user with two alternatives, I'll utilise an animated, customisable modal created using the React Native Modal component. We have to install it for that :

We will make an ImagePickerModal component next.

And last but not least, We need to implement two functions :

• OnImageLibraryPress, choose an image from the library. 
• OnCameraPress, fire the camera and take a photo.

Let's now change the App.js file :

Demo / Output