Bref Résumé
Cette vidéo est un tutoriel complet sur React Native, démontrant comment créer une application mobile de listage de Pokémon. Elle couvre l'installation, la structure du projet, les composants de base, la navigation, la traduction d'un design system, l'utilisation d'APIs, l'animation, et la lecture de sons.
- Installation et configuration de l'environnement React Native avec Expo.
- Création d'une interface utilisateur native en utilisant les composants View et Text.
- Implémentation de la navigation entre les écrans et la gestion des paramètres de route.
- Utilisation de React Query pour la gestion des données asynchrones et la pagination infinie.
- Application de React Native Reanimated pour créer des animations fluides et performantes.
Introduction
La vidéo présente la création d'une application React Native pour lister des Pokémon, en utilisant une maquette Figma et l'API PokéAPI. L'application comprendra une liste de Pokémon avec un système de filtre et d'organisation, ainsi qu'une page de détails pour chaque Pokémon avec la possibilité d'écouter son cri. La vidéo est chapitrée pour faciliter la navigation et permettre aux spectateurs de se concentrer sur les parties qui les intéressent le plus. React Native est présenté comme un outil permettant de créer des applications mobiles natives avec un moteur JavaScript et des composants natifs propres au téléphone.
Installation
Pour commencer avec React Native, il est recommandé d'utiliser Expo, un framework qui simplifie le développement. La commande npx create-expo-app permet d'initialiser un nouveau projet. Il est possible de tester l'application sur un téléphone physique en utilisant l'application Expo Go, disponible sur iOS et Android, qui permet de charger et d'exécuter le code de l'application à distance. Pour un retour visuel direct sur l'ordinateur, il est possible d'installer un simulateur Android via Android Studio.
Installation du simulateur Android
Pour installer un simulateur Android, il faut télécharger et installer Android Studio. Lors de l'installation, il est important de sélectionner l'option "Android Virtual Device". Une fois Android Studio installé, il faut utiliser le Virtual Device Manager pour créer un nouveau périphérique virtuel, en choisissant un type de périphérique (par exemple, Pixel 7) et une API Android. Le périphérique virtuel peut ensuite être lancé, et l'application React Native peut être exécutée sur ce périphérique en utilisant la commande npm run android.
Découverte de la structure
La structure de base d'une application React Native créée avec Expo comprend un dossier app contenant les routes basées sur les fichiers, un dossier components pour les composants réutilisables, un dossier assets pour les ressources, et un fichier app.json pour les informations de l'application. La commande npm run reset-project permet de réinitialiser le projet à un code source minimal.
Eléments de bases (View et Text)
Les blocs de construction de base dans React Native sont les composants View et Text. Le composant View est similaire à une div en HTML et permet d'englober des éléments. Le composant Text est utilisé pour afficher du texte. Il est obligatoire d'utiliser le composant Text pour afficher du texte. Le style des éléments peut être défini en utilisant la propriété style, qui accepte un objet contenant des propriétés CSS-like. L'objet StyleSheet de React Native permet de créer des styles avec autocomplétion et validation.
Navigation
La navigation dans React Native avec Expo Router est basée sur la structure des fichiers dans le dossier app. Chaque fichier représente une route. Le composant Link permet de créer des liens vers d'autres pages. Pour créer des routes avec des paramètres, il faut créer un dossier avec le nom du paramètre entre crochets (par exemple, [id]). Le hook useLocalSearchParams permet de récupérer les paramètres de la route. L'option headerShown: false dans le fichier layout.tsx permet de masquer l'en-tête de navigation. Le composant SafeAreaView permet d'éviter que le contenu ne soit masqué par les éléments de l'interface utilisateur du téléphone. La propriété flex: 1 permet à un élément de prendre tout l'espace disponible.
Traduction du design system
Pour traduire le design system de la maquette Figma, il est recommandé de créer un composant ThemedText qui prend en charge les différentes variantes de typographie et les couleurs définies dans le design system. Les variantes de typographie sont définies dans un objet StyleSheet, et les couleurs sont définies dans un fichier colors.ts qui gère les modes clair et sombre. Un hook useThemeColors permet de récupérer les couleurs en fonction du thème actuel. Un composant Card est également créé pour gérer les cartes utilisées dans l'application, avec une gestion spécifique des ombres portées pour iOS et Android.
Ecran de listing
Pour créer l'écran de listing des Pokémon, il faut d'abord afficher l'en-tête avec le logo et le titre. Le composant Image permet d'afficher des images locales en utilisant la fonction require. Le composant FlatList permet d'afficher une liste d'éléments de manière performante. Il prend en paramètres les données à afficher, une fonction pour rendre chaque élément, et une fonction pour extraire la clé de chaque élément. La propriété numColumns permet de définir le nombre de colonnes de la liste. Les propriétés columnWrapperStyle et contentContainerStyle permettent de styliser la liste.
Le composant PokemonCard
Le composant PokemonCard est créé pour afficher les informations de chaque Pokémon dans la liste. Il prend en paramètres l'ID et le nom du Pokémon. L'URL de l'image du Pokémon est construite en utilisant l'ID du Pokémon et l'API PokéAPI. Le composant Link est utilisé pour rendre la carte cliquable et naviguer vers la page de détails du Pokémon. Le composant Pressable est utilisé pour ajouter un effet visuel lors du clic sur la carte.
Utilisation de l'API
Pour récupérer les informations des Pokémon depuis l'API PokéAPI, la librairie React Query est utilisée. Un hook useFetchQuery est créé pour encapsuler la logique de récupération des données et de gestion du cache. Ce hook prend en paramètre l'URL de l'API et retourne les données récupérées. Il simule également un loader pour afficher un indicateur de chargement pendant la récupération des données.
Liste
Pour implémenter la pagination infinie, le hook useInfiniteQuery de React Query est utilisé. Ce hook permet de charger les données de manière progressive au fur et à mesure que l'utilisateur scrolle vers le bas de la liste. La propriété onEndReached du composant FlatList est utilisée pour détecter lorsque l'utilisateur atteint la fin de la liste et déclencher le chargement de nouvelles données. Un typage plus précis est ajouté au hook useFetchQuery pour améliorer l'autocomplétion et la sécurité du code.
Formulaire de recherche
Un composant SearchBar est créé pour permettre à l'utilisateur de rechercher des Pokémon. Ce composant utilise un TextInput pour récupérer la saisie de l'utilisateur et met à jour un état local avec la valeur de la recherche. La liste des Pokémon est filtrée en fonction de la valeur de la recherche. Un composant SortButton est créé pour permettre à l'utilisateur de trier les Pokémon par ID ou par nom. Un composant Row est créé pour simplifier la création de lignes d'éléments. Un composant Modal est utilisé pour afficher une boîte de dialogue modale avec les options de tri.
Gestion de l'ordre
Un composant SortButton est créé pour gérer l'ordre d'affichage des Pokémon. Il utilise une modal pour afficher les options de tri (par ID ou par nom). Les icônes de tri sont exportées depuis la maquette Figma. Le composant Pressable est utilisé pour rendre les options de tri cliquables. Un hook useRef est utilisé pour mesurer la position du bouton de tri et positionner la modal en conséquence. La librairie Dimensions de React Native est utilisée pour obtenir la taille de l'écran.
Ecran détail du pokemon
Un composant RootView est créé pour encapsuler la logique de style de base de l'application. Le composant PokemonView est créé pour afficher les détails d'un Pokémon. Il utilise l'API PokéAPI pour récupérer les informations du Pokémon. Une image de fond est ajoutée à l'écran de détails. Un composant PokemonSpec est créé pour afficher les spécifications du Pokémon (poids, taille, etc.). Une fonction est créée pour formater le poids et la taille du Pokémon. Un second appel HTTP est effectué pour récupérer la description du Pokémon.
Stats du pokemon
Un composant PokemonStat est créé pour afficher les statistiques du Pokémon. Ce composant affiche le nom de la statistique, sa valeur, et une barre de progression. Une fonction est créée pour raccourcir le nom des statistiques. Les statistiques sont affichées en utilisant une boucle sur les données récupérées depuis l'API.
Animer avec React Native Reanimated
React Native Reanimated est utilisé pour animer la couleur de fond de l'écran de détails. Une valeur partagée est créée pour gérer la progression de l'animation. La fonction interpolateColor est utilisée pour interpoler entre la couleur de teinte et la couleur de fond. La fonction withTiming est utilisée pour créer une animation de type "timing". Un useEffect est utilisé pour déclencher l'animation lorsque la couleur de fond change. Des statistiques par défaut sont utilisées pour éviter les problèmes de relayout pendant le chargement des données.
Lecture de sons
La librairie Expo AV est utilisée pour lire le cri du Pokémon lorsque l'utilisateur clique sur l'image. La fonction Audio.Sound.createAsync est utilisée pour charger le son depuis l'URL de l'API. La fonction sound.playAsync est utilisée pour lancer la lecture du son.
Navigation au swipe
La librairie react-native-pager-view est utilisée pour permettre à l'utilisateur de passer d'un Pokémon à l'autre en swipant. Ce composant affiche trois pages : le Pokémon précédent, le Pokémon actuel, et le Pokémon suivant. Les événements onPageSelected et onPageScrollStateChanged sont utilisés pour détecter lorsque l'utilisateur change de page et mettre à jour l'ID du Pokémon en conséquence. Une référence est utilisée pour contrôler le pager à distance et revenir à la page centrale après chaque swipe. Des conditions sont ajoutées pour éviter les problèmes de navigation aux extrémités de la liste des Pokémon.
Navigation
Les flèches de navigation sont mises à jour pour utiliser les fonctions de navigation du pager. Des conditions sont ajoutées pour masquer les flèches de navigation aux extrémités de la liste des Pokémon.
Build
La vidéo évoque rapidement la partie build de l'application en utilisant EAS, le service de build d'Expo. EAS permet de construire l'application pour iOS et Android depuis le Cloud. Il est nécessaire de modifier le fichier app.json pour configurer les permissions, le splash screen, et d'autres paramètres de l'application.
Conclusion
La vidéo conclut en félicitant les spectateurs qui sont arrivés jusqu'à la fin et en encourageant à poser des questions et à donner des suggestions pour de futurs tutoriels. Elle souligne que React Native n'est pas si compliqué si on connaît déjà React, et qu'il existe des librairies de composants pour simplifier le développement.
