Avant d'entamer notre sujet, définissons le terme API. En React Native, les API (Interfaces de Programmation Applicatives) font référence à un ensemble de composants qui permettent aux développeurs d'interagir avec les fonctionnalités natives telles que la caméra, le GPS, les capteurs, le stockage local, etc. En d'autres termes, elles offrent un moyen d'accéder aux fonctionnalités matérielles et logicielles des périphériques mobiles, ce qui permet de créer des applications mobiles riches et interactives. Dans les lignes qui suivent, nous allons explorer les API des bibliothèques de React Native, fournies sous forme de modules JavaScript qui encapsulent les fonctionnalités natives des plateformes iOS et Android.
AccessibillityInfo
Il s'agit d'une API qui permet aux développeurs d'obtenir des informations concernant l'appareil, notamment s'il dispose ou non d'un lecteur d'écran actuellement actif, et de les avertir lorsque l'état de ce dernier change. Les principales méthodes liées à celle-ci sont addEventListener(), qui aide à gérer les événements, announceForAccessibility(), announceForAccessibilityWithOptions(), isAccessibilityServiceEnabled(), isReduceMotionEnabled(), isScreenReaderEnabled(), etc.
Alert
Cette API est accessible à la fois sur la plateforme Android et IOS. Elle sert à afficher des alertes statiques. Son rôle est de lancer une boîte de dialogue d’alerte avec le titre et le message spécifiés.
Pour les applications IOS, nous avons le choix de spécifier n’importe quel nombre de bouton, contrairement aux applications Android où l’on peut spécifier que trois boutons. Dans le cas où on spécifie un seul bouton, ce dernier est considéré « Positif » comme « ok ». Deux boutons signifient « Positif » et « Négatif », c’est-à-dire « Ok » et « Annuler ». Enfin, les trois boutons en même temps signifient « Positif », « Négatif » et « Neutre », comme « Ok », « Annuler » et « Plus tard ».
Une alerte peut contenir plusieurs paramètres les voici en détail :
AppState
AppState est une API fondamentale sur React Native. Elle permet de rapporter au développeur si son application est au premier plan ou en arrière-plan et l’averti lorsque son état change.
Il existe trois états de l’application :
- Active – signifie que l’application s’exécute au premier plan.
- Background - l’application s’exécute en arrière-plan, c’est-à-dire que l’utilisateur est soit dans une autre application, soit sur l’écran d’accueil ou encore sur une autre Activity.
Inactive – un état se produisant lors de la transition entre le premier plan et l’arrière-plan, et pendant les périodes d’inactivité telles que l’ouverture de notifications ou en cas d’appel entrant.
Keyboard
Le module Keyboard est conçu dans le but de contrôler les événements du clavier. Il permet d'écouter ces derniers, d'y réagir et d'apporter des modifications. Ce module est utile pour configurer le type de clavier adapté à l'entrée attendue (numérique, email, mot de passe).
Vibration
Cette API est principalement dédiée à la vibration de l'appareil. Sur Android, la durée de vibration est par défaut de 400 millisecondes, tandis que sur iOS, la durée des vibrations est fixée à environ 400 millisecondes.
UseColorScheme
UseColorScheme apporte des mises à jour du schéma de couleurs de l’apparence de l’application. Sa valeur de retour concerne la combinaison de couleurs préférée de l’utilisateur actuelle. La valeur est mise à jour dépendamment de deux facteurs. Le premier est une action directe de l’utilisateur en sélectionnant ses préférences dans les paramètres de l’appareil. Le deuxième est lié au calendrier, par exemple thèmes clairs et sombres selon le cycle jour/nuit.
Il existe trois couleurs pris en charge par React Native :
- « Light » : L’utilisateur préfère un thème clair.
- « Dark » : L’utilisateur préfère un thème sombre.
- « Null » : L’utilisateur n’a pas encore indiqué de thème préféré.
Voici un exemple concret qui retourne le thème actuel.
UseWindowDimensions
UseWindowDimensions met automatiquement à jour et permet d’obtenir les valeurs comme la hauteur et la largeur de l’écran. L’exemple suivant est une excellente démonstration.
Les API pour Android
BackHandler
Sur les appareils Android uniquement, l’API BackHandler permet de gérer le comportement du bouton de retour physique. Elle contrôle le comportement de navigation de l’application. Après avoir enregistrer les écouteurs d’événements, le dernier abonnement aux évènements enregistré est appelé en premier.
Dans le cas où l’abonnement renvoie vrai, les abonnements enregistrés ne seront pas appelés. Si aucun abonnement ne renvoie vrai ou si aucun n’est enregistré, il appelle la fonctionnalité du bouton de retour par défaut pour quitter l’application.
PermissionsAndroid
PermissionsAndroid est une API incontournable car elle donne l’accès au modèle d’autorisations d’Android. Les autorisations « normales » sont accordées par défaut lors de l’installation de l’application à conditions qu’elles apparaissent dans AndroidManifest.xml. En revanche, les autorisations « dangereuses » nécessitent une boîte de dialogue.
Si un utilisateur désactive une autorisation demandée par le développeur, le système d’exploitation demandera à l’application de justifier la nécessité de cette autorisation.
ToastAndroid
L’API ToastAndroid est utilisée pour afficher des messages sur des appareils Android. Ces messages d’informations apparaissent temporairement en bas de l’écran. Ils informent l’utilisateur d’une action ou d’un événement. La méthode principale est show(message, duration) qui les paramètre message et la durée.
Les API pour IOS
ActionSheetIOS
ActionSheetIOS est une API dont le rôle est d’afficher une feuille d’action sur des appareils IOS. Une feuille d’action est une interface utilisateur qui présente un ensemble de choix d’options à l’utilisateur sous forme de boutons et permet de choisir une action parmi les choix proposés.
DynamicColorIOS
La fonction DynamiColorIOS gère un type de couleur spécifique à IOS. Elle prend deux clés obligatoires « dark » et « light », et deux clés facultatives « highContrastDark » et « highContrastLight ». Elles correspondent aux couleurs que l’on souhaite utiliser pour le mode sombre et le mode clair respectivement.
Settings
En React Native, Settings met en place des méthodes pour effacer, obtenir et définir des valeurs dans l’interface NSUserDefaults, ainsi que pour surveiller les changements de valeurs. NSUserDefault est une interface vers la base de données par défaut de l'utilisateur, dans laquelle sont stockées les paires clé-valeur de manière persistante lors des lancements de l’application.
Références
- « AccessiblityInfo», React Native, https://reactnative.dev/docs/accessibilityinfo , (page consultée le 20 février 2024).
- «Alert», React Native, https://reactnative.dev/docs/alert , (page consultée le 20 février 2024).
- «AppState», React Native, https://reactnative.dev/docs/appstate , (page consultée le 20 février 2024).
- «Keyboard», React Native, https://reactnative.dev/docs/keyboard, (page consultée le 20 février 2024).
- «Vibration», React Native, https://reactnative.dev/docs/vibration , (page consultée le 20 février 2024).
- «useColorScheme», Runebook.dev, https://runebook.dev/fr/docs/react_native/usecolorscheme , (page consultée le 21 février 2024).
- «useWindowDimensions», W3cubDocs, https://docs.w3cub.com/react_native/usewindowdimensions.html , (page consultée le 21 février 2024)
- «NSUserDefaults», Apple Developer, https://developer.apple.com/documentation/foundation/nsuserdefaults, (page consultée le 21 février 2024).
- Mohammed Rashid, «How to use BackHandler with React Navigation in React Native», Coding with Rashid, https://codingwithrashid.com/how-to-use-backhandler-with-react-navigation-in-react-native/, (page consultée le 22 février 2024).
Commentaires