Installer Expo et créer ta première application React Native

Expo est le framework qui sert à créer, lancer et publier une application React Native : une commande crée le projet, une autre le lance, et l'application Expo Go l'affiche sur ton téléphone en scannant un QR code. Ce chapitre installe les outils, crée le projet AppliFrais Mobile, le lance sur un téléphone et sur un émulateur Android, et explique la structure du projet, le débogage et les erreurs de démarrage les plus courantes.

Ce qu'il te faut

Vérifie Node.js dans un terminal :

node --version
# v24.15.0
npm --version

Créer le projet

Place-toi dans ton dossier de travail et lance :

npx create-expo-app@latest applifrais-mobile
cd applifrais-mobile

La commande télécharge le modèle par défaut, installe les dépendances (quelques centaines de mégaoctets dans node_modules) et initialise un dépôt Git. Le package.json obtenu contient notamment :

{
  "name": "applifrais-mobile",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "lint": "expo lint"
  },
  "dependencies": {
    "expo": "~58.0.22",
    "expo-router": "~58.0.29",
    "react": "19.3.0",
    "react-native": "0.88.1"
  }
}

Les numéros exacts changent à chaque mise à jour, mais la logique reste : la version d'expo fixe la version de tout le reste. Depuis 2026, les modules d'Expo portent d'ailleurs le numéro du SDK (expo-router 58.x pour le SDK 58).

Lancer l'application sur ton téléphone avec Expo Go

1. Installe Expo Go depuis le Play Store ou l'App Store.
2. Dans le dossier du projet, lance le serveur de développement :

npx expo start

3. Un QR code s'affiche dans le terminal. Sur Android, scanne-le depuis Expo Go ; sur iPhone, avec l'appareil photo. Sur iPhone, Expo Go et Expo CLI doivent être connectés au même compte Expo : crée un compte gratuit, puis lance npx expo login sur ton ordinateur et connecte-toi dans Expo Go.
4. L'application s'ouvre après quelques secondes.

Le téléphone et l'ordinateur doivent être sur le même réseau Wi-Fi : le téléphone télécharge le code depuis le serveur Metro de ton ordinateur, sur le port 8081. Les réseaux d'établissement ou d'entreprise isolent souvent les appareils entre eux ; dans ce cas, lance le serveur en mode tunnel :

npx expo start --tunnel

Le code passe alors par un serveur relais d'Expo sur Internet : ça marche partout, mais chaque rechargement est plus lent.

Dans le terminal du serveur, quelques touches servent en permanence :

Lancer l'application sur un émulateur Android

Un émulateur est un téléphone Android virtuel qui tourne sur ton ordinateur. Il te sert à tester sans téléphone, sur plusieurs tailles d'écran et plusieurs versions d'Android.

1. Installe Android Studio et, au premier lancement, laisse-le installer le SDK Android.
2. Dans Android Studio, ouvre Device Manager et crée un appareil virtuel : un Pixel récent, avec une image système Android récente qui contient les services Google Play (pour les notifications et la position).
3. Démarre l'appareil, puis, dans le terminal d'Expo, appuie sur a. Expo installe Expo Go dans l'émulateur et y ouvre ton application.

L'émulateur demande de la mémoire vive : sur un ordinateur de 8 Go, ferme le navigateur pendant que tu l'utilises, ou préfère ton téléphone. Sur Mac, le simulateur iOS s'installe avec Xcode et s'ouvre avec la touche i.

La structure du projet

Il n'y a pas de dossiers android/ et ios/ : Expo les génère quand il faut compiler l'application, à partir de app.json. C'est la génération native continue : tu ne modifies jamais ces dossiers à la main, tu configures app.json.

Ton premier écran

Le modèle contient un exemple avec deux onglets. Pour partir d'une page blanche :

npm run reset-project

Le script propose de déplacer l'exemple dans un dossier example/ (garde-le pour t'en inspirer) et crée un src/app/index.tsx minimal. Remplace son contenu par :

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

export default function Accueil() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24, fontWeight: '700' }}>Bonjour AppliFrais</Text>
      <Text>Ton premier écran React Native.</Text>
    </View>
  );
}

Enregistre : le téléphone se met à jour en moins d'une seconde. C'est le Fast Refresh : Metro renvoie seulement le module modifié et React redessine l'écran en conservant l'état des composants. Si tu modifies un fichier qui n'exporte pas de composant, l'application se recharge entièrement.

Tu reconnais un composant React : une fonction qui renvoie du JSX, exportée par défaut. Les seules nouveautés sont View et Text, importés de react-native, et le style écrit en objet JavaScript (chapitre 3).

TypeScript en deux minutes

Le modèle d'Expo est en TypeScript : du JavaScript auquel on ajoute des types, vérifiés avant l'exécution. Les fichiers portent l'extension .ts, ou .tsx s'ils contiennent du JSX. Tout ce que tu sais de JavaScript reste valable ; il suffit de savoir lire trois notations.

// 1. Annoter une variable ou un paramètre
function formatEuros(montant: number): string {
  return `${montant.toFixed(2).replace('.', ',')} €`;
}

// 2. Décrire la forme d'un objet
type ResumeFiche = { id: number; mois: string; etat: 'CR' | 'CL' | 'VA' | 'MP'; montantValide: number | null };

// 3. Préciser le type d'un état React
const [fiches, setFiches] = useState<ResumeFiche[] | null>(null);

'CR' | 'CL' | 'VA' | 'MP' est une union : l'état ne peut prendre que ces quatre valeurs. number | null veut dire « un nombre ou rien ». Si tu écris formatEuros('23,50'), l'éditeur souligne l'erreur avant même que tu lances l'application. Pour vérifier tout le projet :

npx tsc --noEmit

Si tu préfères JavaScript, renomme les fichiers en .js ou .jsx et retire les annotations : Expo accepte les deux. Ce cours garde TypeScript, comme le cours React, parce que c'est ce que tu trouveras en entreprise.

Déboguer

Les messages d'erreur. Une erreur JavaScript non rattrapée affiche un écran rouge avec le message et la pile d'appels ; un avertissement s'affiche en bas de l'écran (la LogBox). Lis la première ligne de la pile qui pointe vers ton fichier : c'est presque toujours là.

La console. Les console.log() de ton code s'affichent dans le terminal où tourne npx expo start.

React Native DevTools. Appuie sur j dans le terminal : un débogueur s'ouvre dans le navigateur, avec la console, les points d'arrêt, l'inspecteur de composants React et l'onglet réseau qui liste les requêtes fetch de l'application.

Le menu développeur. Secoue le téléphone ou appuie sur m dans le terminal : il permet de recharger, d'ouvrir le débogueur, d'activer l'inspecteur d'éléments ou l'analyse des performances.

Installer une bibliothèque

Ajoute toujours une bibliothèque avec npx expo install, jamais directement avec npm install :

npx expo install expo-secure-store

expo install choisit la version de la bibliothèque compatible avec ton SDK, alors que npm install prend la dernière, qui peut ne pas fonctionner. Pour vérifier l'ensemble du projet :

npx expo install --check   # liste les versions incompatibles
npx expo-doctor            # diagnostique la configuration

Expo Go ou development build

Expo Go est une application fixe : elle contient un ensemble de modules natifs choisis par Expo, et rien d'autre. Tant que tu n'utilises que ces modules, tu n'as rien à compiler. Dès que tu as besoin d'autre chose, il te faut un development build : ta propre version d'Expo Go, compilée avec tes modules et ta configuration.

Pour AppliFrais, Expo Go suffit jusqu'au chapitre 8. Les notifications push et Face ID du chapitre 9 demandent un development build :

npx expo install expo-dev-client
npx expo run:android            # compilation locale, Android Studio requis
# ou, sans Android Studio, dans le cloud d'Expo :
npx eas-cli@latest build --platform android --profile development

Les erreurs de démarrage les plus fréquentes

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

export default function Accueil() {
  const d = new Date();
  const date = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', gap: 8 }}>
      <Text style={{ fontSize: 28, fontWeight: '700' }}>AppliFrais</Text>
      <Text>Lucas</Text>
      <Text>{date}</Text>
    </View>
  );
}