Pantalla de React Native con Expo y TypeScript con todos sus estados

Pega un ejemplo real de la respuesta JSON de tu API y menciona las librerías que ya tienes. Prueba la pantalla en un dispositivo iOS y otro Android, con el modo avión activado y con el tamaño de letra al máximo.

Pantalla: lista de pedidos del usuario con filtro por estado y detalle al pulsar · Datos: GET /orders paginado con token · Navegación: Expo Router · Estilo: StyleSheet, colores de marca.

3. Hook de datos — hooks/useRecetas.ts

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

export type Receta = { id: string; titulo: string; imagen: string; minutos: number }; // tipo de id: [COMPLETAR]
type RespuestaRecetas = { items: Receta[]; total: number };
type Estado = 'cargando' | 'error' | 'ok';

const API_URL = process.env.EXPO_PUBLIC_API_URL;

export function useRecetas(busqueda: string) {
  const [recetas, setRecetas] = useState<Receta[]>([]);
  const [estado, setEstado] = useState<Estado>('cargando');
  const [refrescando, setRefrescando] = useState(false);
  const controlador = useRef<AbortController | null>(null);

  const cargar = useCallback(async (esRefresco = false) => {
    controlador.current?.abort();                       // cancela la petición anterior
    const ctrl = new AbortController();
    controlador.current = ctrl;
    if (esRefresco) setRefrescando(true); else setEstado('cargando');
    try {
      // Nombre del parámetro de búsqueda: [COMPLETAR]
      const params = new URLSearchParams({ pagina: '1', q: busqueda });
      const res = await fetch(`${API_URL}/api/recetas?${params}`, { signal: ctrl.signal });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const datos = (await res.json()) as RespuestaRecetas;
      setRecetas(datos.items);
      setEstado('ok');
    } catch {
      if (!ctrl.signal.aborted) setEstado('error');
    } finally {
      if (!ctrl.signal.aborted) setRefrescando(false);
    }
  }, [busqueda]);

  useEffect(() => {
    cargar();
    return () => controlador.current?.abort();          // al desmontar la pantalla
  }, [cargar]);

  return { recetas, estado, refrescando, reintentar: () => cargar(), refrescar: () => cargar(true) };
}

Sin dependencias nuevas: si el proyecto crece (caché entre pantallas, paginación infinita), merecería la pena una librería de data fetching. La pantalla usa estado para mostrar skeleton, error con botón «Reintentar» o la FlatList…