Networking y APIs REST

React Native tiene fetch() integrado, igual que los navegadores modernos. Para proyectos pequeños es suficiente. Para proyectos serios, axios simplifica el manejo de headers, timeouts e interceptores. TanStack Query (antes react-query) es el estándar para data fetching en apps de producción: maneja automáticamente el estado de loading, error, caché, refetch automático y sincronización en background, eliminando cientos de líneas de código boilerplate.

En mobile, la conectividad de red es un factor crítico que no existe en el desarrollo web. Un usuario puede pasar de WiFi a datos móviles, entrar a una zona sin señal, o tener una conexión muy lenta. La librería @react-native-community/netinfo detecta cambios de conectividad en tiempo real.

React Query tiene soporte integrado para "no hacer fetch si no hay conexión". Un buen manejo de errores de red (mensajes comprensibles + botón de reintentar) es fundamental en la experiencia mobile.

import { useState, useEffect, useCallback } from "react";
import NetInfo from "@react-native-community/netinfo";

// Hook para llamadas a API
function useApi(url) {
  const [datos, setDatos] = useState(null);
  const [cargando, setCargando] = useState(false);
  const [error, setError] = useState(null);

  const cargar = useCallback(async () => {
    setCargando(true);
    setError(null);
    try {
      const resp = await fetch(url, {
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${await getToken()}`,
        },
      });

      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
      setDatos(await resp.json());
    } catch (err) {
      setError(err.message);
    } finally {
      setCargando(false);
    }
  }, [url]);

  useEffect(() => { cargar(); }, [cargar]);

  return { datos, cargando, error, recargar: cargar };
}

// Verificar conectividad
function useConectividad() {
  const [conectado, setConectado] = useState(true);

  useEffect(() => {
    const unsub = NetInfo.addEventListener(state => {
      setConectado(state.isConnected && state.isInternetReachable);
    });
    return () => unsub();
  }, []);

  return conectado;
}

// Componente con manejo de red
function PantallaDatos() {
  const conectado = useConectividad();
  const { datos, cargando, error, recargar } = useApi("https://api.example.com/items");

  if (!conectado) return (
    <View style={styles.center}>
      <Text>Sin conexión a internet</Text>
      <TouchableOpacity onPress={recargar}><Text>Reintentar</Text></TouchableOpacity>
    </View>
  );

  if (cargando) return <ActivityIndicator color="#00E5A0" />;
  if (error) return <Text>Error: {error}</Text>;

  return (
    <FlatList data={datos} renderItem={({ item }) => <ItemCard item={item} />} />
  );
}