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 :

PermissionsAndroid · React Native
Project with Native Code Required

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 :

GitHub - ivpusic/react-native-image-crop-picker: iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping
iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping - GitHub - ivpusic/react-native-image-crop-picker: iOS/Android image picker with supp...
J'espère que cet article vous aura été utile, et à bientôt sur le blog !

Les articles les plus populaires du blog

Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !

Voir la sélection 🚀

Recevez les articles de la semaine par e-mail pour ne rien manquer !

S'abonner à la newsletter 📧

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !


Photo par Derick Daily sur Unsplash