How To Select Photos in React Native

In this tutorial, we will learn how to select photos in a React Native application using the popular library react-native-image-picker. We will cover setting up a new React Native project, installing the library, getting permissions for the camera and library, and selecting and taking photos.

Setting Up a React Native Project

To get started, you will need to have React Native installed on your development machine. If you haven't already done so, you can install React Native by following the instructions on the official website.

Once React Native is installed, you can create a new project using the following command:

react-native init MyApp

This will create a new directory called MyApp that contains the basic structure of a React Native application.

Installing React Native Image Picker

To install the react-native-image-picker library, you can use the following command:

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

or

yarn add react-native-image-picker

This command will add the library to your project and save it as a dependency in your package.json file.

Getting Permissions for Camera and Library

Before you can use the camera or access the photo library in your application, you will need to request permission from the user. You can use the react-native-permissions library to request permissions. First, install the library:

npm install react-native-permissions --save

or

yarn add react-native-permissions

Then, import the library in your App.js file:

import Permissions from 'react-native-permissions';

You can use the check method to check the current status of a permission, and the request method to request a permission. For example, to request camera permissions, you can use the following code:

Permissions.check('camera').then(response => {
  if (response === 'authorized') {
    // Permission is already granted
  } else {
    Permissions.request('camera').then(response => {
    if (response === 'authorized') {
      // Permission is now granted
    } else {
      // Permission was denied
    }
  });
  }
});

Selecting Images from the Camera Roll

To select an image from the camera roll, you can use the react-native-image-picker library's showImagePicker method. First, import the library in your component:

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

Then, you can use the following code to open the image picker and allow the user to select an image:

ImagePicker.showImagePicker({}, response => {
  if (response.didCancel) {
  console.log('User cancelled image picker');
  } else if (response.error) {
  console.log('ImagePicker Error: ', response.error);
  } else {
  console.log('Image selected: ', response.uri);
})

Then, you can use the following code to launch the camera and take a photo:

ImagePicker.launchCamera({}, response => {
  if (response.didCancel) {
  console.log('User cancelled image picker');
  } else if (response.error) {
  console.log('ImagePicker Error: ', response.error);
  } else {
  console.log('Image taken: ', response.uri);
  }
});

The launchCamera method takes an options object as its first argument, where you can specify various options such as the quality of the image, the aspect ratio, and more. You can find the full list of options in the official documentation.

In this article, we learned how to select photos in a React Native app, with full code examples. If you'd like to save a lot of development time, by not reinventing the wheel, we highly recommend using high-quality app templates.