Écran React Native avec Expo et TypeScript, tous les états compris

Prompt

Agis comme développeur mobile senior spécialisé en React Native, Expo et TypeScript, attentif aux performances et à l'accessibilité sur iOS et Android.

Contexte :
- Rôle de l'écran et actions de l'utilisateur : {{ecran}}
- Source des données (endpoint, forme de la réponse, authentification) : {{donnees}}
- Bibliothèque de navigation : {{navigation}}
- Style visuel et bibliothèques déjà présentes dans le projet : {{style}}

Livrables :
1. Structure des fichiers : écran, composants enfants, hook de données et types.
2. Des types TypeScript pour la réponse de l'API et les props, sans any.
3. Un hook de données avec chargement, erreur, nouvelle tentative, pull-to-refresh et annulation au démontage de l'écran. Si le projet utilise déjà une bibliothèque de récupération de données, adapte-toi ; sinon, explique quand elle vaudrait la peine.
4. L'écran complet avec des états clairs : chargement (squelette), vide avec appel à l'action, erreur avec bouton de nouvelle tentative et hors ligne.
5. Des listes avec FlatList ou un équivalent optimisé : keyExtractor stable, éléments mémoïsés, pagination ou défilement infini si pertinent.
6. Accessibilité : accessibilityLabel et accessibilityRole, tailles de cible tactile minimales, prise en charge de la taille de texte dynamique et lecture correcte avec VoiceOver et TalkBack.
7. Mise en page adaptée : SafeAreaView ou insets, clavier (KeyboardAvoidingView s'il y a des formulaires), mode sombre et différences iOS/Android.
8. Des tests avec React Native Testing Library pour les états chargement, erreur et succès, avec l'API simulée.

Contraintes :
- N'invente ni endpoint ni champ : si la forme de la réponse manque, utilise un type marqué [À COMPLÉTER] et pose-moi la question.
- N'ajoute pas de dépendance sans justifier pourquoi ni proposer l'alternative sans dépendance.
- Si l'écran ou le parcours n'est pas clair, demande-moi avant d'écrire le code.

Format : sections numérotées, un bloc de code par fichier et de brèves notes sur les choix.

Comment l'utiliser

Exemple d'utilisation

Exemple de résultat

import { useCallback, useEffect, useRef, useState } from 'react';

export type Recette = { id: string; titre: string; image: string; minutes: number }; // type de l'id : [À COMPLÉTER]
type ReponseRecettes = { items: Recette[]; total: number };
type Etat = 'chargement' | 'erreur' | 'ok';

const API_URL = process.env.EXPO_PUBLIC_API_URL;

export function useRecettes(recherche: string) {
  const [recettes, setRecettes] = useState<Recette[]>([]);
  const [etat, setEtat] = useState<Etat>('chargement');
  const [rafraichit, setRafraichit] = useState(false);
  const controleur = useRef<AbortController | null>(null);

  const charger = useCallback(async (estRafraichissement = false) => {
    controleur.current?.abort();                        // annule la requête précédente
    const ctrl = new AbortController();
    controleur.current = ctrl;
    if (estRafraichissement) setRafraichit(true); else setEtat('chargement');
    try {
      // Nom du paramètre de recherche : [À COMPLÉTER]
      const params = new URLSearchParams({ page: '1', q: recherche });
      const res = await fetch(`${API_URL}/api/recettes?${params}`, { signal: ctrl.signal });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const donnees = (await res.json()) as ReponseRecettes;
      setRecettes(donnees.items);
      setEtat('ok');
    } catch {
      if (!ctrl.signal.aborted) setEtat('erreur');
    } finally {
      if (!ctrl.signal.aborted) setRafraichit(false);
    }
  }, [recherche]);

  useEffect(() => {
    charger();
    return () => controleur.current?.abort();           // au démontage de l'écran
  }, [charger]);

  return { recettes, etat, rafraichit, reessayer: () => charger(), rafraichir: () => charger(true) };
}

Informations clés

Catégorie

Programmation et développement · Applications mobiles

Type de résultat

Code

Niveau

Intermédiaire

Conçu pour

ChatGPT, Claude, Gemini et Microsoft Copilot

Vérifié sur

En attente de vérification éditoriale

Variables

Rôle de l’écran, Source des données, Navigation et Style et bibliothèques

Langue

Français

Prix

Gratuit, sans inscription

Mis à jour

07/11/2026

Questions fréquentes