React Native : Composants appareil

Modules natifs à l'appareil

Dans ce dernier blog, je vais parler de l'utilisation des composants natifs de l’appareil sur lequel on développe une application React Native.

Dans la plupart des applications mobiles, plusieurs composants natifs sont utilisés afin d'ajouter des fonctionnalités à l'expérience utilisateur. Par exemple, l’utilisation de l’appareil photo dans une application permet d’implémenter davantage de fonctionnalités dans un projet React Native.

Dans ce blog, je montrerai comment utiliser la caméra.

Application de la caméra

Pour commencer, dans un projet React Native existant, il faut ajouter la librairie Expo Camera avec la commande suivante :

npx expo install expo-camera

Par la suite, il faut modifier le fichier de configuration JSON afin d'activer le plugin de la caméra. Dans le fichier app.json, ajoute ces lignes dans la section plugins :

"plugins": [
      [
        "expo-camera",
        {
          "cameraPermission": "L'application a besoin de la permission pour utiliser la caméra",
          "microphonePermission": "L'application a besoin de la permission pour utiliser le microphone",
          "recordAudioAndroid": true
        }
      ]
]  

Ainsi, après avoir obtenu les autorisations nécessaires, nous pouvons maintenant utiliser la caméra dans l'application.

Dans une vue TypeScript, il est important d’ajouter certaines étapes pour assurer son bon fonctionnement :

• Vérifier les autorisations d’utilisation de la caméra.
• Implémenter la fonctionnalité de la caméra.

const [permission, requestPermission] = useCameraPermissions();

Cette constante permet de demander l'autorisation d'utiliser la caméra à l'utilisateur. Une fois la permission accordée, il suffit d'ajouter la caméra dans la vue avec CameraView.

D'ailleurs, il ne faut pas oublier d'importer le module nécessaire pour utiliser la caméra dans le fichier TypeScript :

import { CameraView, CameraType, useCameraPermissions } from 'expo-camera';

Conclusion

En résumé, l'utilisation de la caméra dans React Native reste relativement simple.J’ai simplement montré l’implémentation de base, mais il est possible d’adapter son utilisation à des besoins spécifiques, selon les préférences du développeur.

Références

• Documentation React Native officielle pour l'utilisation de la caméra : React Native Camera

• Documentation sur les permissions sur Android : React Native Dev Android Permission