Tutoriel React Native : Créer une application React Native

React Native est un framework permettant de développer des applications mobiles (iOS et Android) à partir de code React. Dans cette formation, nous allons découvrir son fonctionnement à travers la création d'une petite application de Pokédex.

• Maquette figma
• API Pokeapi

Sommaire

00:00:00 Introduction
00:02:38 Installation
00:04:27 Installation du simulateur Android
00:07:20 Découverte de la structure
00:08:50 Eléments de bases (View et Text)
00:11:00 Navigation
00:17:00 Traduction du design system
00:30:52 Ecran de listing
00:39:22 Le composant PokemonCard
00:47:01 Utilisation de l'API
00:55:00 Liste
01:04:00 Formulaire de recherche
01:16:29 Gestion de l'ordre
01:39:29 Ecran détail du pokemon
02:13:00 Stats du pokemon
02:25:23 Animer avec React Native Reanimated
02:40:45 Lecture de sons
03:09:32 Navigation
02:51:57 Navigation au swipe
03:06:00 Build
03:08:34 Conclusion

Fonctionnement

React Native fonctionne à l'aide de 2 composants principaux :

• Un moteur JavaScript va être embarqué sur le téléphone et va exécuter le code React pour obtenir le virtual DOM.
• Ce Virtual DOM est ensuite traduit en code natif pour générer des éléments d'interface natif (d'où le nom).

Cette approche permet de créer une interface multiplateforme en utilisant un langage familier.

Expo

Lorsque vous allez vouloir initialiser un projet react native, vous verrez rapidement Expo mentionné. Mais de quoi s'agit-t-il ?

Expo est un ensemble d'outils et de services qui simplifient le développement d'applications mobiles avec React Native. Il permet de créer, tester, et déployer des applications sans avoir à configurer et gérer un environnement de développement natif pour Android et iOS.

Le premier outil que l'on va utiliser est Expo Go qui permet de lancer une application react native à distance. Pour cela l'application va être capable de se connecter à un serveur local que l'on va lancer pendant le développement et d'exécuter le code React à distance. Cela permet de tester une application sans avoir de compilation à faire et d'avoir un rechargement à chaud lors de la mise à jour du code

Composants de base

Dans React Native, deux des composants les plus fondamentaux sont View et Text. Ils forment la base de l'interface utilisateur et sont les composants que l'on va le plus utiliser

Le Composant View

Le composant View est un conteneur de base, on peut le comparer à une div en HTML. Il permet de regrouper d'autres composants, comme des textes, des images, ou encore d'autres View, et de définir leur agencement à l'écran.

import { View, Text } from 'react-native';

const MyComponent = () => {
  return (
    <View style={{ padding: 20, backgroundColor: 'lightgray' }}>
      <Text>Bonjour, monde !</Text>
    </View>
  );
};

Le Composant Text

Le composant Text est utilisé pour afficher des chaînes de caractères dans l'application. Il est important de noter qu'il est nécessaire d'utiliser un composant Text dès que l'on voudra afficher de l'écran. Comme le composant View il pourra être styliser.

Style

Pour concevoir notre interface on pourra ajouter du style aux éléments. On pourra définir ce style en dehors du composant pour éviter la création de nouveaux objets pour rien.

import { View, Text, StyleSheet } from 'react-native';

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Bienvenue sur mon application !</Text>
      <Text style={styles.subtitle}>Merci de visiter.</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 18,
    color: '#666',
  },
});