Ecrã em React Native com Expo e TypeScript com todos os estados

Cola um exemplo real da resposta JSON da tua API e indica as bibliotecas que já usas. Testa o ecrã num dispositivo iOS e num Android, em modo de avião e com o tamanho de letra no máximo.

Ecrã: lista de encomendas do utilizador com filtro por estado e detalhe ao tocar · Dados: GET /orders paginado com token · Navegação: Expo Router · Estilo: StyleSheet com as cores da marca.

3. Hook de dados — hooks/useReceitas.ts

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

export type Receita = { id: string; titulo: string; imagem: string; minutos: number }; // tipo do id: [COMPLETAR]
type RespostaReceitas = { items: Receita[]; total: number };
type Estado = 'a_carregar' | 'erro' | 'ok';

const API_URL = process.env.EXPO_PUBLIC_API_URL;

export function useReceitas(pesquisa: string) {
  const [receitas, setReceitas] = useState<Receita[]>([]);
  const [estado, setEstado] = useState<Estado>('a_carregar');
  const [aAtualizar, setAAtualizar] = useState(false);
  const controlador = useRef<AbortController | null>(null);

  const carregar = useCallback(async (eRefresh = false) => {
    controlador.current?.abort();                       // cancela o pedido anterior
    const ctrl = new AbortController();
    controlador.current = ctrl;
    if (eRefresh) setAAtualizar(true); else setEstado('a_carregar');
    try {
      // Nome do parâmetro de pesquisa: [COMPLETAR]
      const params = new URLSearchParams({ pagina: '1', q: pesquisa });
      const res = await fetch(`${API_URL}/api/receitas?${params}`, { signal: ctrl.signal });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const dados = (await res.json()) as RespostaReceitas;
      setReceitas(dados.items);
      setEstado('ok');
    } catch {
      if (!ctrl.signal.aborted) setEstado('erro');
    } finally {
      if (!ctrl.signal.aborted) setAAtualizar(false);
    }
  }, [pesquisa]);

  useEffect(() => {
    carregar();
    return () => controlador.current?.abort();          // quando o ecrã é desmontado
  }, [carregar]);

  return { receitas, estado, aAtualizar, tentarDeNovo: () => carregar(), atualizar: () => carregar(true) };
}

Sem dependências novas: se a app crescer (cache entre ecrãs, paginação infinita), passa a compensar uma biblioteca de data fetching. O ecrã usa estado para mostrar o skeleton, o erro com botão «Tentar de novo» ou a FlatList…