Uploading and cropping a photo with React Native

Adding an avatar, creating an album, sharing photos—there are many reasons to want to add an image upload feature to your React-Native application.

Fortunately, there are a few libraries perfectly suited for this, and with a bit of configuration it is possible to add this feature in just a few minutes.

Installation

We will use the "react-native-image-picker" library (Github) because it is very simple to use, allows for interesting configurations and also makes it possible to crop and resize a photo very quickly.

To add it to the project, nothing could be simpler, you just need to install it:

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

Then import it into the file of the component that will host the feature:

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

Adding permissions

Accessing the device's camera or photo library requires a few permissions to be added, here they are for each operating system:

iOS

The permissions file is located here: /ios/[app]/Info.plist

<plist version="1.0">
  <dict>
    ...
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) utilise la caméra pour vous permettre d'envoyer une photo de profilusing a camera to enable you to upload pictures for profil.</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) needs your authorization to enable you to upload pictures for profil.</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) needs your authorization to enable you to upload pictures for profil.</string>
  </dict>
</plist>

Android

The permissions file is located here: /android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="...">
  ...
  <uses-permission android:name="android.permission.CAMERA" />
  ...
</manifest>

The little subtlety is that Android gives the option to disable certain permissions after the application has been installed. Fortunately, React-Native provides us with a special API for handling permission requests on Android:

Choosing and configuring the photo

Once the permissions have been added, all that's left to do is use the library by calling one of the two main methods: "openPicker" to choose from the device's photos, or "openCamera" to take a photo.

Here is an example of basic usage of the library, with the final image in Base64 so it can be easily uploaded to the server:

//index.js

upload(image){
  const base64 = `data:${image.mime};base64,${image.data}`;
  //Upload de l'image vers le serveur
  //...
}

handleError(e){
  //Impossible d'ouvrir/prendre une photo
}

getPicture(mode){
  const options = {
    width: 500,
    height: 500,
    cropping: true,
    includeBase64: true,
  };
  if(mode === 'library'){
    ImagePicker.openPicker(options)
    .then(this.upload)
    .catch(this.handleError);
  } else if(mode === 'camera'){
    ImagePicker.openCamera(options)
    .then(this.upload)
    .catch(this.handleError);
  } else {
    console.error('Unknown picture mode:', mode);
  }
}            

Options

The example above shows usage with cropping and a specified final size, but it is also possible to disable cropping, or to keep the original size and ratio of the image.

It is also possible to save the image with a circular mask by setting the "cropperCircleOverlay" option to true.

Going further

This article only covers the basic use of the library, but it actually offers many different possibilities such as selecting multiple photos, or even videos!

To discover more, I refer you to the official documentation of the library, available on GitHub: