React native image picker android

How to pick images from Camera & Gallery in React Native app

If you would like access to the entire source code, you can check out the GitHub repo here . For step-by-step tutorial, continue reading below.

Picking images from Gallery and Camera is one of the most important and basic functionalities that is needed in almost all the apps. Advanced functionalities are built upon this basic core facility. For picking the image, we will use a popular and superior library called react-native-image-picker . Which provides the ImagePicker component in which you can provide the image picking option from Gallery or Camera.

We’ll follow a stepped approach to create an ImagePicker app in React Native. Following are the steps

• Step 1 — Create a basic React Native app
• Step 2 — Set up React Native Image Picker
• Step 3 — Use React Native Image Picker to pick images in app

So let’s dive right in!

1. Create a basic React Native app

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App.

Assuming that you have node installed, you can use npm to install the react-native-cli command-line utility. Open the terminal and run the following command to the bottom

Now, let’s create a new React Native project, e.g. RNimagePicker

When the above command is done, open the main folder in your preferred editor. When we open the project in a code editor, its structure looks like this.

2. Set up React Native Image Picker

To use React Native Image Picker we need to install react-native-image-picker dependency.

Installation of Dependency

To add React Native Image Picker to our React Native Project, we need to run the following command at the root of the project

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

Linking of Dependency

To use react-native-image-picker library we have to link some dependencies in Android and iOS project files. So, we need to run the following command at the root of the project

Permissions

You will also need to add some permissions on Android.

Now we will see how to give permissions in Android to use Camera and read Storage.

We are going using a Native API Camera and choose the image from the Gallery. So, we need to provide some permission to access the Camera and Gallery.

We are going to add the following permissions in the AndroidManifest.xml

Project → android → app → src → debug → AndroidManifest.xml

Your AndroidManifest.xml should look like this:

3.How to Use React Native Image Picker

React Native Image Picker library provides an ImagePicker component in which you can set the options like the title of the picker, your custom buttons (name and title of the button) and storage options like skipBackup, etc..

Options that you get in React Native Image Picker are the following:

• Title
• Cancel ButtonTitle
• Take PhotoButtonTitle
• Choose From Library ButtonTitle
• Custom Buttons
• Camera Type
• Media Type
• Max Width
• Max Height
• Quality
• Video Quality
• Duration Limit
• Rotation
• Allows Editing
• No Data
• Storage Options
• PermissionDenied

The code snippet of ImagePicker

In the above code, we will open an Image picker as you Click on “chooseImage” and will show the selected image on the Image component. Selection options are Camera and Gallery by default but we have also added a custom button which will simply generate an alert when we click on it.

Directly Launch Camera

To implement the functionality of launching the Camera directly as you click on “Direct Launch Camera”, use the code below. It will directly open the camera and will show the clicked image on the Image Component.

Directly Launch Image Library

To Directly Launch the Image Library you can use the following code below. It will directly open the Image Library and will show the Selected image on the Image Component.

App.js

This React Native module allows you to use native UI to select a photo/video from the device library as well as from the camera directly.

Your Screen should look like this:

Finally, for your reference all the screens for this image picker functionality will look similar to those shown below:

Conclusion

In this post, you learned in a quick fashion to implement React Native Image Picker in your React Native App. This enables your app to pick images/videos from the Camera and Gallery. It is one of the most important and basic functionalities that is needed in almost all the apps. Advanced functionalities are build up upon this basic core facility. You can find the complete code in this Github repo over here.

Источник

Example of Image Picker in React Native

React Native Image Picker

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.

A new version of React Native Image Picker is out. We have updated the post for latest V3.+ version also.

How to Use ImagePicker Component?

Before the last major update in library (Major update: V 3.+)

react-native-image-picker library provided an ImagePicker component in which you can set the options like the title of the picker, Your custom Buttons(Name and title of the button) and storage options like skipBackup or path.
Here is the code snippet of ImagePicker we have used in this Example

But now after version 3.+

You will have different API to access the images/video, You can now

1. Click images
2. Record Videos
3. Pick Images
4. Pick Videos

Now we have two different APIs launchCamera and launchImageLibrary. This is very easy to use and works perfectly for Android and iOS both.

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

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run

Run the following commands to create a new React Native project

If you want to start a new project with a specific React Native version, you can use the —version argument:

This will make a project structure with an index file named App.js in your project directory.

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

Run the following command

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

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.

Please add the following permissions in the AndroidManifest.xml

Permission	Purpose
CAMERA	To access the camera
WRITE_EXTERNAL_STORAGE	To Read and Write the content in the SD card

For more about the permission, you can see this post.

IOS Permission to use the Camera and to Read the Storage

1. Open the project ImagePickerExample -> ios -> ImagePickerExample.xcodeproj in XCode. Click on Project (ImagePickerExample in my case) from the left sidebar and you will see multiple options in the workspace.

2. Select info tab which is info.plist

3. Click on the plus button to add following permission key and value which will be visible when permission dialog pops up.

• If you are allowing user to select image/video from photos, add “Privacy – Photo Library Additions Usage Description”.
• To capture image add “Privacy – Camera Usage Description”.
• If you are allowing user to capture video add “Privacy – Camera Usage Description” add “Privacy – Microphone Usage Description”.

Key	Value
Privacy – Photo Library Additions Usage Description	App needs photo library Access
Privacy – Camera Usage Description	App needs Camera Access Permission for testing
Privacy – Microphone Usage Description	App needs Microphone Access Permission for testing

Code for Image Picker in React Native (Image Picker V2.+)

Open App.js in any code editor and replace the code with the following code

App.js

Code for Image Picker in React Native (Image Picker V3.+)

Open App.js in any code editor and replace the code with the following code

App.js

To Run the React Native App

Open the terminal again and jump into your project using.

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

or on the iOS Simulator by running (macOS only)

Known Issue

In case you face any min version issue in Android then you can update minSdkVersion to 21 in yourProject/android/build.gradle

Output Screenshots

Android

This is how you can Pick an Image from the React Native Application. If you have any doubts or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Источник