Uploader et cropper une photo avec React-Native

Ajouter un avatar, créer un album, partager des photos, nombreuses sont les raisons de vouloir ajouter une fonctionnalité d'envoi d'image dans son application React-Native.

Heureusement, il existe quelques bibliothèques parfaites pour cela, et avec quelques configurations il est possible d'ajouter cette fonctionnalité en quelques minutes.

Installation

Nous allons utiliser la librairie "react-native-image-picker" (Github) car elle est très simple à utiliser, permet des configurations intéressantes et permet également de découper et redimensionner une photo très rapidement.

Pour l'ajouter au projet, rien de plus simple, il vous suffit de l'installer :

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

Puis de l'importer dans le fichier du composant qui accueillera la fonctionnalité :

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

Ajouter les autorisations

Accéder à la caméra ou à la bibliothèque photo de l'appareil requiert quelques autorisations à ajouter, les voici pour chaque système d'exploitation :

iOS

Le fichier des autorisation se trouve ici : /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

Le fichier des autorisation se trouve ici : /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>

La petite subtilité est qu'Android donne la possibilité de désactiver certaines permissions après l'installation de l'application. Heureusement, React-Native nous met à disposition une API spéciale pour les demandes d'autorisation sous Android :

Choisir et configurer la photo

Une fois les permission ajoutées, il ne vous restera plus qu'à utiliser la bibliothèque en appelant l'une des deux principales méthodes : "openPicker" pour choisir dans les photos de l'appareil, ou "openCamera" pour prendre une photo.

Voici un exemple d'utilisation basique de la bibliothèque, avec l'image finale en Base64 pour pouvoir l'uploader facilement sur le serveur :

//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

L'exemple ci-dessus présente une utilisation avec cropping et une taille finale spécifiée, mais il est également possible de désactiver ce dernier, ou de garder la taille et le ratio original de l'image.

Il est également possible de sauvegarder l'image avec un masque circulaire avec l'option "cropperCircleOverlay" à true.

Pour aller plus loin

Cet article ne couvre que l'utilisation basique de la bibliothèque, mais cette dernière offre bien des possibilités différentes comme la sélection de plusieurs photos, ou même de vidéos !

Pour en découvrir plus, je vous renvoi vers la documentation officielle de la bibliothèque, disponible sur GitHub :