React-Native-Screen mit Expo und TypeScript inklusive aller Zustände

Füge ein echtes Beispiel der JSON-Antwort deiner API ein und nenne die Bibliotheken, die du schon nutzt. Teste den Screen auf einem iOS- und einem Android-Gerät, im Flugmodus und mit maximaler Schriftgröße.

Screen: Bestellliste des Nutzers mit Statusfilter und Detailansicht beim Antippen · Daten: paginiertes GET /orders mit Token · Navigation: Expo Router · Stil: StyleSheet in Markenfarben.

3. Daten-Hook — hooks/useRezepte.ts

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

export type Rezept = { id: string; titel: string; bild: string; minuten: number }; // Typ der id: [AUSFÜLLEN]
type RezepteAntwort = { items: Rezept[]; total: number };
type Status = 'laedt' | 'fehler' | 'ok';

const API_URL = process.env.EXPO_PUBLIC_API_URL;

export function useRezepte(suche: string) {
  const [rezepte, setRezepte] = useState<Rezept[]>([]);
  const [status, setStatus] = useState<Status>('laedt');
  const [aktualisiert, setAktualisiert] = useState(false);
  const controller = useRef<AbortController | null>(null);

  const laden = useCallback(async (istRefresh = false) => {
    controller.current?.abort();                        // vorherige Anfrage abbrechen
    const ctrl = new AbortController();
    controller.current = ctrl;
    if (istRefresh) setAktualisiert(true); else setStatus('laedt');
    try {
      // Name des Suchparameters: [AUSFÜLLEN]
      const params = new URLSearchParams({ seite: '1', q: suche });
      const res = await fetch(`${API_URL}/api/rezepte?${params}`, { signal: ctrl.signal });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const daten = (await res.json()) as RezepteAntwort;
      setRezepte(daten.items);
      setStatus('ok');
    } catch {
      if (!ctrl.signal.aborted) setStatus('fehler');
    } finally {
      if (!ctrl.signal.aborted) setAktualisiert(false);
    }
  }, [suche]);

  useEffect(() => {
    laden();
    return () => controller.current?.abort();           // beim Verlassen des Screens
  }, [laden]);

  return { rezepte, status, aktualisiert, erneutVersuchen: () => laden(), aktualisieren: () => laden(true) };
}

Keine neuen Abhängigkeiten: Wächst die App (Cache über Screens hinweg, Infinite Pagination), lohnt sich eine Data-Fetching-Bibliothek. Der Screen nutzt status, um Skeleton, Fehler mit „Erneut versuchen“-Button oder die FlatList anzuzeigen…