React Native Image Picker

Updated March 20, 2023

Introduction to React Native Image Picker

The following article provides an outline for React Native Image Picker. As we are aware that almost every application should have the capability to upload pictures from a camera or gallery.

Syntax:

ImagePicker.showImagePicker(pickeroptions, response =>
{
//handle post image pick actions
}
)

In the above syntax, we can see that image picker can be called by calling a method showImagePicker of ImagePicker, which accepts two arguments containing pickeroptions and a response handling mechanism. The pickerOptions include options like the following:

• Title: Specify the title of the image picker dialog box.
• CustomButtons: Specify buttons with a dialog box. It also allows changing of text associated with custom buttons.
• Storage options: This option allows changes in storage level options like skipBackup and path for images.

How does Image Picker works in React?

Using an image picker in a react application requires the following steps:

Step 1: Set up react cli – In this step will install a react native client interface. React native Cli can be installed using the below command.

npm install -g react-native-cli

After setting up react cli, create a new react native project using the below command.

react-native init RimagePickerDemo

Step 2: Set up React Image Picker Dependency – Next, we need to install dependency for the image picker. In order to install image picker dependency, we have to run the below command.

yarn add react-native-image-picker

The above command will copy image picker dependency in the react module. Now will link image picker dependency with our project using the below command.

react-native link react-native-image-picker

Step 3: Add Permissions – Accessing the camera and gallery from the mobile application requires some permissions. This can be done by making permission entries in AndroidManifest.xml. The below screenshot shows permission entries in AndroidManifest.xml.

After completion of the above steps, we are ready to use the image picker in our application.

The image picker library provides a component called an image picker that allows us to choose images from the camera or gallery and use them in our application. We can change the title of the image picker dialog, custom buttons as well as storage options.

Here is a code snippet showing the use of an image picker in react:

Code:

var options = {
title: 'my pic app',
takePhotoButtonTitle: ‘Take photo with your camera’,
chooseFromLibraryButtonFunction: ‘choose photo from library’
};
//call to imagepicker. Dialog pops up to choose image
ImagePicker.showImagePicker(options, response => {
if (response.didCancel) {
console.log('Operation cancelled by user');
} else if (response.error) {
console.log('ImagePicker Error Occured: ', response.error);
} else if (response.customButton) {
console.log('User Clicked on custom button: ', response.customButton);
alert(response.customButton);
} else {
let source = response;
this.setState({
// Image selected by user
filePath: source,
});
}
});

The above Image picker code is used to show a pop up prompting the user to choose an image to upload.

The below output would be prompted for choosing an image.

Output:

After the user performs actions, a response will be received as per user actions. Users may cancel the operation, may press a custom button or may choose an image. The above code shows response handling in all the mentioned cases.

Example of React Native Image Picker

Here is an example showing the use of reacting image picker in a react application.

Code:

import * as React from 'react';
import { Button, Image, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';
export default class ImagePickerExampleDemo extends React.Component {
state = {
image: null,
};
render() {
let { image } = this.state;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Please Select an Image"
onPress={this.pickImage}
/>
{image &&
<Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
</View>
);
}
componentDidMount() {
this.getPermissionAsync();
console.log('hello');
}
getPermissionAsync = async () => {
if (Constants.platform.ios) {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status !== 'granted') {
alert('Sorry, camera roll permission is required for this action');
}
}

When the above code is compiled and run, we will see the following output.

Output:

After clicking on the above, we will be navigated to our gallery for choosing an image. After selecting an image, we will see the following output.

As you can see selected image appears.

Conclusion

This article clearly explains the use of the Image picker library available in react native. Different types of customizations can be performed per our requirements, and new features can be derived from the existing library.

This has been a guide to React Native Image Picker. Here we discuss the introduction, syntax, working, and example of react native image picker along with code implementation. You may also have a look at the following articles to learn more –

1. React Native Layout
2. React Native Architecture
3. React Native SectionList
4. React Native Image