Développer une application mobile 📱

React Native + Expo

React Native permet de créer des applications mobiles natives (iOS et Android) avec React. Expo simplifie le setup et le développement.

---

Installation

# Créer un projet Expo
npx create-expo-app mon-app-mobile
cd mon-app-mobile

# Lancer le serveur de développement
npx expo start

# Scanner le QR code avec Expo Go sur votre téléphone

---

Structure d'un projet

mon-app-mobile/
├── app/               # Routes (Expo Router)
│   ├── _layout.tsx    # Layout racine
│   ├── index.tsx      # Écran d'accueil
│   ├── login.tsx      # Écran de connexion
│   └── (tabs)/        # Navigation par onglets
│       ├── index.tsx
│       └── profile.tsx
├── components/        # Composants réutilisables
├── services/          # Appels API
├── hooks/             # Hooks personnalisés
├── constants/         # Couleurs, thèmes
└── app.json           # Configuration

---

Navigation

// app/_layout.tsx
import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Accueil' }} />
      <Stack.Screen name="login" options={{ title: 'Connexion' }} />
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

---

Composants mobiles

// components/UserCard.tsx
import { View, Text, TouchableOpacity } from 'react-native';

interface UserCardProps {
  name: string;
  email: string;
  onPress?: () => void;
}

export function UserCard({ name, email, onPress }: UserCardProps) {
  return (
    <TouchableOpacity onPress={onPress} className="p-4 bg-zinc-800 rounded-xl">
      <Text className="text-white font-medium">{name}</Text>
      <Text className="text-zinc-400 text-sm">{email}</Text>
    </TouchableOpacity>
  );
}

---

Appels API

// services/api.ts
const API_URL = 'https://mon-api.com';

export async function fetchUsers() {
  const response = await fetch(`${API_URL}/api/users`);
  if (!response.ok) throw new Error('Erreur');
  return response.json();
}

export async function createUser(data: { name: string; email: string }) {
  const response = await fetch(`${API_URL}/api/users`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  return response.json();
}

---

Stockage local

import AsyncStorage from '@react-native-async-storage/async-storage';

// Sauvegarder
await AsyncStorage.setItem('token', 'abc123');

// Lire
const token = await AsyncStorage.getItem('token');

// Supprimer
await AsyncStorage.removeItem('token');

---

Utiliser l'IA pour le mobile

Bon prompt :

Crée un écran de connexion React Native avec Expo Router.
Champs : email (TextInput) + mot de passe (TextInput sécurisé).
Bouton "Se connecter" qui appelle POST /api/auth/login.
En cas de succès, redirige vers /(tabs).
En cas d'erreur, affiche un message d'erreur.
Style : thème sombre, centré, padding.

---

Exercices 🎯

1. Setup : Créez un projet Expo et lancez-le sur votre téléphone.
2. Navigation : Créez 3 écrans avec navigation.
3. API : Connectez l'app à votre backend et affichez des données.
4. Stockage : Sauvegardez un token d'authentification localement.

Prochaine leçon : Déboguer le code généré par l'IA.