Schermata React Native con Expo e TypeScript con tutti gli stati

Incolla un esempio reale della risposta JSON della tua API e indica le librerie che usi già. Prova la schermata su un dispositivo iOS e uno Android, in modalità aereo e con la dimensione del testo al massimo.

Schermata: elenco ordini dell’utente con filtro per stato e dettaglio al tocco · Dati: GET /orders paginato con token · Navigazione: Expo Router · Stile: StyleSheet con i colori del brand.

3. Hook dei dati — hooks/useRicette.ts

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

export type Ricetta = { id: string; titolo: string; immagine: string; minuti: number }; // tipo dell'id: [DA COMPLETARE]
type RispostaRicette = { items: Ricetta[]; total: number };
type Stato = 'caricamento' | 'errore' | 'ok';

const API_URL = process.env.EXPO_PUBLIC_API_URL;

export function useRicette(ricerca: string) {
  const [ricette, setRicette] = useState<Ricetta[]>([]);
  const [stato, setStato] = useState<Stato>('caricamento');
  const [aggiornando, setAggiornando] = useState(false);
  const controller = useRef<AbortController | null>(null);

  const carica = useCallback(async (eRefresh = false) => {
    controller.current?.abort();                        // annulla la richiesta precedente
    const ctrl = new AbortController();
    controller.current = ctrl;
    if (eRefresh) setAggiornando(true); else setStato('caricamento');
    try {
      // Nome del parametro di ricerca: [DA COMPLETARE]
      const params = new URLSearchParams({ pagina: '1', q: ricerca });
      const res = await fetch(`${API_URL}/api/ricette?${params}`, { signal: ctrl.signal });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const dati = (await res.json()) as RispostaRicette;
      setRicette(dati.items);
      setStato('ok');
    } catch {
      if (!ctrl.signal.aborted) setStato('errore');
    } finally {
      if (!ctrl.signal.aborted) setAggiornando(false);
    }
  }, [ricerca]);

  useEffect(() => {
    carica();
    return () => controller.current?.abort();           // quando la schermata si smonta
  }, [carica]);

  return { ricette, stato, aggiornando, riprova: () => carica(), aggiorna: () => carica(true) };
}

Nessuna nuova dipendenza: se l’app cresce (cache tra schermate, paginazione infinita), varrebbe la pena una libreria di data fetching. La schermata usa stato per mostrare skeleton, errore con pulsante «Riprova» o la FlatList…