Dev mobile avec React Native & Expo

Behrouze

Behrouze

— 3 min read

Démarrer l'apprentissage du dév React Native pour créer des applications mobile Android & IOS par le tuto officiel Expo (recommandé dans la doc officielle React Native).

Expo is a framework that makes developing Android and iOS apps easier. Our framework provides file-based routing, a standard library of native modules, and much more. 

Pré-requis

Pour commencer, il nous faudra les éléments suivants sur notre poste de dev :

  • Expo Go (app mobile) installé sur un appareil physique, c'est l'appli IOS & Android qui permet de faire tourner notre application en direct
  • Node.js (version LTS)
  • VS Code, Cursor ou tout autre IDE
  • macOS, Linux ou Windows pour les courageux (avec PowerShell et WSL2)

Initialisation du projet

Dans un terminal :

# initialiser notre projet avec le template de projet par défaut (contient tout l'outillage Expo pour dev)
npx create-expo-app@latest NomDeNotreProjet && cd NomDeNotreProjet

# reset le projet pour avoir une base propre
npm run reset-project

# 🚀
npx expo start

Styling

En React Native, le style est appliqué en javascript via la prop style qui prend en valeur un objet javascript (ou un tableau dont le dernier style domine les précédents), avec des clé valeurs ressemblant à des couples propriété/valeur CSS.

Il est recommandé d'utiliser StyleSheet.create de la lib React Native pour créer un objet StyleSheet (qui ne sera par recréé à chaque rendu et optimisé pour les rendus et animations natives). Cela offre également du type checking.

Un pattern courant consiste à faire en sorte que votre composant prenne une prop style qui, à son tour, est utilisée pour styliser les sous-composants. Vous pouvez ainsi faire en sorte que les styles « cascadent » comme dans les CSS.

Voir aussi :

Routing

On utilisera Expo router qui est un framework de routing qui permet de faire du file based routing avec :

  • un dossier spécial /app va contenir les routes et layouts
  • le dossier /components est en dehors du système de routage (/app) par convention n'interviennent pas dans le routage
  • le layout racine /app/_layout.tsx va contenir les éléments communs à toutes les écrans/pages (ex: headers/footers)
  • l'arborescence dessous /app va déterminer le chemin d'accès via des URLs correspondants aux fichiers .tsx
  • les fichiers index.tsx seront transparents dans les URLs
    (ex : /app/toto/index.tsx sera accédé via l'URL /app/toto)
  • les autres fichiers (autre que index.tsx) seront accédés par une URL correspondant au chemin + nom de fichier (sans l'extension .tsx)
    (ex: /app/titi/formulaire.tsx sera accédé par /app/titi/formulaire)
  • le dossier spécial /app/(xxx) oui oui avec les parenthèses, est utilisé par Expo Router pour regrouper des routes avec un layout commun par ex sans que le xxx apparaisse dans le chemin d'accès
    (ex: /app/(tabs)/about.tsx sera accédé par /app/about)

Voir aussi :

Démarrer les projets plus rapidement : Ignite

Ignite is the battle-tested React Native boilerplate

Developers who use Ignite report that it saves them
2-4 weeks spinning up a new project!

Lorsqu'on démarre un projet "green field", on passe souvent par les mêmes étapes de choix d'architecture et d'outillage, mais on se rend vite compte que 80% de nos projets Front/Mobile ont les meme besoins : certains types de layouts, expo et ses libs, authentification, i18n etc. C'est le constat qui a amené l'équipe de Infinite Red a créer ✨ Ignite ✨ qui grace à sa CLI, nous permet de bootstraper un projet en qqs secondes !

Voir aussi le Ignite Cookbook pour React Native qui est un ensemble de tips et guides.

Liens et docs

Documentation

Videos Youtube

To be continued...

Read more