Example of Image Picker in React Native

Here is an example of Image Picker in React Native. For picking the image we will use a very good library called react-native-image-picker. It is a React Native module that allows you to select a photo/video from the device library or camera. It is very simple and straight forward.

You have so many options while choosing the image/video like you can decide the maxWidth and maxHeight if the image, you can set the quality of the image/video using quality (0–1), videoQuality(low-high), in case you want to use it to record video then you can set the video max duration in seconds, also you will have the option to saves the image/video file captured to public photos.

Image Picker Example Description

In this example below, we will have 4 different buttons on a screen and on click of each button user can

1. Click image and captured image path will be returned
2. Record video and recorded video path will be returned
3. Pick image from gallery
4. Pick video from gallery

So Let’s get started with our Example.

To Make a React Native App

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

Installation of Dependency

To use ImagePicker we need to install react-native-image-picker dependency.

To install this open the terminal and jump into your project using

cd ProjectName

Run the following command

npm install react-native-image-picker --save

This command will copy all the dependencies into your node_module directory, You can find the directory in node_module the directory named react-native-image-picker.

CocoaPods Installation

After the updation of React Native 0.60, they have introduced autolinking so we do not require to link the library but need to install pods. So to install pods use

cd ios && pod install && cd ..

Android Permission to use the Camera and to Read the Storage

We are using a Native API Camera and also going to choose the image from the gallery so we need to add some permission to the AndroidManifest.xml file.

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

To Run the React Native App

Open the terminal again and jump into your project using.

cd ProjectName

To run the project on an Android Virtual Device or on real debugging device

react-native run-android