Installation et Configuration

Créons votre premier projet React Native avec Expo. Si vous avez déjà installé Node.js pour R4A10, vous êtes presque prêt.

Prérequis

Node.js et npm

Vous avez déjà installé Node.js et npm pour le cours R4A10. Vérifiez que tout fonctionne :

node --version   # v18 ou supérieur
npm --version    # v9 ou supérieur

Application Expo Go sur votre téléphone

Installez Expo Go sur votre smartphone :

• Android : Expo Go sur Google Play
• iOS : Expo Go sur l'App Store

Créer un projet

La commande

npx create-expo-app@latest mon-app-mobile

Cette commande crée un nouveau projet Expo avec la configuration par défaut. Elle installe automatiquement les dépendances nécessaires.

Lancer le projet

cd mon-app-mobile
npx expo start

Le terminal affiche un QR code. Scannez-le avec votre téléphone :

• Android : ouvrez Expo Go et scannez le QR code
• iOS : ouvrez l'application Appareil photo et scannez le QR code (Expo Go s'ouvre automatiquement)

npx expo start --tunnel

Alternatives sans téléphone

Si vous n'avez pas de téléphone disponible :

# Lancer dans un émulateur Android (nécessite Android Studio)
npx expo start --android

# Lancer dans le simulateur iOS (macOS uniquement, nécessite Xcode)
npx expo start --ios

# Lancer dans le navigateur web (limité mais utile pour un aperçu rapide)
npx expo start --web

Structure du projet

Après la création, votre projet contient :

mon-app-mobile/
├── app/                    # Écrans de l'application (Expo Router)
│   ├── (tabs)/             # Groupe de navigation par onglets
│   │   ├── index.tsx       # Écran d'accueil (onglet 1)
│   │   ├── explore.tsx     # Écran Explorer (onglet 2)
│   │   └── _layout.tsx     # Configuration des onglets
│   ├── _layout.tsx         # Layout racine de l'application
│   └── +not-found.tsx      # Page 404
├── assets/                 # Images, polices, fichiers statiques
│   ├── images/
│   └── fonts/
├── components/             # Composants réutilisables
├── constants/              # Constantes (couleurs, etc.)
├── hooks/                  # Hooks personnalisés
├── app.json                # Configuration de l'application
├── package.json            # Dépendances et scripts
└── tsconfig.json           # Configuration TypeScript

Les dossiers importants

app/ : contient les écrans de votre application. Chaque fichier correspond à une route (comme le routing par fichiers de Next.js). C'est ici que vous passerez le plus de temps.

components/ : contient les composants réutilisables (boutons, cartes, etc.). Même logique qu'en React web.

assets/ : contient les fichiers statiques (images, polices). Les images sont importées différemment qu'en web.

Le fichier app.json

Le fichier app.json contient la configuration de votre application :

{
  "expo": {
    "name": "mon-app-mobile",
    "slug": "mon-app-mobile",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "myapp",
    "userInterfaceStyle": "automatic",
    "newArchEnabled": true,
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "plugins": [
      "expo-router"
    ]
  }
}

Propriétés principales

• name : nom affiché de l'application
• slug : identifiant URL pour Expo (pas d'espaces, pas de majuscules)
• version : numéro de version de l'application
• orientation : "portrait", "landscape" ou "default" (les deux)
• icon : icône de l'application sur l'écran d'accueil
• ios / android : configuration spécifique à chaque plateforme
• plugins : extensions Expo (router, caméra, etc.)

Votre premier écran

Ouvrez le fichier app/(tabs)/index.tsx et remplacez son contenu :

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

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Bienvenue dans R4A11 !</Text>
      <Text style={styles.subtitle}>Mon premier écran React Native</Text>
    </View>
  );
}

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

Sauvegardez le fichier. Expo Go recharge automatiquement l'application sur votre téléphone (Fast Refresh), comme le HMR de Vite dans le navigateur.

Commandes utiles

# Démarrer le serveur de développement
npx expo start

# Démarrer avec un tunnel (si le Wi-Fi pose problème)
npx expo start --tunnel

# Effacer le cache (si l'app ne se met pas à jour)
npx expo start --clear

# Installer une dépendance compatible Expo
npx expo install nom-du-package

# Vérifier les dépendances
npx expo doctor

# Correct : Expo choisit la bonne version
npx expo install react-native-maps

# Risqué : peut installer une version incompatible
npm install react-native-maps

À retenir

Ressources