UX de fallos de red

import NetInfo, { useNetInfo } from "@react-native-community/netinfo";
import { onlineManager, useQuery } from "@tanstack/react-query";
import { useEffect } from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
 
// Sincroniza el estado en línea de TanStack Query con el dispositivo
onlineManager.setEventListener((setOnline) =>
  NetInfo.addEventListener((state) => {
    setOnline(!!state.isConnected && state.isInternetReachable !== false);
  })
);
 
function OfflineBanner() {
  const net = useNetInfo();
  const offline = net.isConnected === false || net.isInternetReachable === false;
  if (!offline) return null;
  return (
    <View style={styles.banner}>
      <Text style={styles.bannerText}>Estás sin conexión. Mostrando datos guardados donde están disponibles.</Text>
    </View>
  );
}
 
async function fetchPosts() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=5");
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json() as Promise<{ id: number; title: string }[]>;
}
 
export function FeedScreen() {
  const { data, error, isError, isFetching, refetch, dataUpdatedAt } = useQuery({
    queryKey: ["posts"],
    queryFn: fetchPosts,
    staleTime: 60_000,
    retry: 2,
  });
 
  return (
    <View style={styles.screen}>
      <OfflineBanner />
      {data && (
        <Text style={styles.stale}>
          {isFetching ? "Actualizando…" : `Actualizado ${new Date(dataUpdatedAt).toLocaleTimeString()}`}
        </Text>
      )}
      {isError && (
        <View style={styles.errorBox}>
          <Text style={styles.errorText}>{error instanceof Error ? error.message : "La solicitud falló"}</Text>
          <Pressable onPress={() => refetch()} style={styles.retry}>
            <Text style={styles.retryLabel}>Reintentar</Text>
          </Pressable>
        </View>
      )}
      {data?.map((post) => (
        <Text key={post.id} style={styles.row}>{post.title}</Text>
      ))}
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, backgroundColor: "#fff" },
  banner: { backgroundColor: "#fef3c7", padding: 10, borderRadius: 8, marginBottom: 12 },
  bannerText: { color: "#92400e", fontWeight: "600" },
  stale: { fontSize: 12, color: "#64748b", marginBottom: 8 },
  errorBox: { padding: 12, backgroundColor: "#fee2e2", borderRadius: 8, marginBottom: 12 },
  errorText: { color: "#991b1b", marginBottom: 8 },
  retry: { alignSelf: "flex-start", backgroundColor: "#dc2626", paddingHorizontal: 12, paddingVertical: 8, borderRadius: 6 },
  retryLabel: { color: "#fff", fontWeight: "600" },
  row: { fontSize: 14, marginBottom: 6 },
});

import AsyncStorage from "@react-native-async-storage/async-storage";
import NetInfo, { useNetInfo } from "@react-native-community/netinfo";
import { onlineManager, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useCallback, useEffect, useState } from "react";
import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
 
const QUEUE_KEY = "offline-mutation-queue-v1";
 
type Todo = { id: string; title: string; pending?: boolean };
type QueuedCreate = { id: string; title: string };
 
onlineManager.setEventListener((setOnline) =>
  NetInfo.addEventListener((state) => {
    setOnline(!!state.isConnected && state.isInternetReachable !== false);
  })
);
 
async function loadTodos(): Promise<Todo[]> {
  const raw = await AsyncStorage.getItem("todos-cache");
  return raw ? (JSON.parse(raw) as Todo[]) : [];
}
 
async function saveTodos(todos: Todo[]) {
  await AsyncStorage.setItem("todos-cache", JSON.stringify(todos));
}
 
async function readQueue(): Promise<QueuedCreate[]> {
  const raw = await AsyncStorage.getItem(QUEUE_KEY);
  return raw ? (JSON.parse(raw) as QueuedCreate[]) : [];
}
 
async function writeQueue(items: QueuedCreate[]) {
  await AsyncStorage.setItem(QUEUE_KEY, JSON.stringify(items));
}
 
async function createTodoOnServer(title: string): Promise<Todo> {
  const net = await NetInfo.fetch();
  if (!net.isConnected) throw new TypeError("OFFLINE");
 
  // API simulada - reemplaza con tu backend
  await new Promise((r) => setTimeout(r, 400));
  return { id: `srv-${Date.now()}`, title };
}
 
function ConnectivityChrome() {
  const net = useNetInfo();
  const offline = net.isConnected === false;
  const captive = net.isConnected && net.isInternetReachable === false;
 
  if (offline) {
    return (
      <View style={[styles.banner, styles.offline]}>
        <Text style={styles.bannerText}>Sin conexión - los cambios se sincronizarán cuando te reconectes.</Text>
      </View>
    );
  }
  if (captive) {
    return (
      <View style={[styles.banner, styles.captive]}>
        <Text style={styles.bannerText}>Conectado, pero sin acceso a internet.</Text>
      </View>
    );
  }
  return null;
}
 
export default function App() {
  const queryClient = useQueryClient();
  const [title, setTitle] = useState("");
  const [queueLen, setQueueLen] = useState(0);
 
  const todosQuery = useQuery({
    queryKey: ["todos"],
    queryFn: loadTodos,
    staleTime: 30_000,
    // Stale-while-revalidate: renderiza la lista en caché inmediatamente; refresca cuando está en línea
    placeholderData: (prev) => prev,
  });
 
  const flushQueue = useCallback(async () => {
    const queue = await readQueue();
    if (queue.length === 0) return;
 
    const remaining: QueuedCreate[] = [];
    let todos = (await loadTodos()) ?? [];
 
    for (const item of queue) {
      try {
        const created = await createTodoOnServer(item.title);
        todos = todos.map((t) => (t.id === item.id ? created : t));
      } catch {
        remaining.push(item);
      }
    }
 
    await saveTodos(todos);
    await writeQueue(remaining);
    setQueueLen(remaining.length);
    queryClient.setQueryData(["todos"], todos);
  }, [queryClient]);
 
  useEffect(() => {
    const unsub = NetInfo.addEventListener((state) => {
      if (state.isConnected && state.isInternetReachable !== false) {
        void flushQueue();
      }
    });
    void readQueue().then((q) => setQueueLen(q.length));
    return () => unsub();
  }, [flushQueue]);
 
  const createMutation = useMutation({
    mutationFn: async (newTitle: string) => {
      const optimistic: Todo = { id: `local-${Date.now()}`, title: newTitle, pending: true };
      const current = (await loadTodos()) ?? [];
      const next = [optimistic, ...current];
      await saveTodos(next);
      queryClient.setQueryData(["todos"], next);
 
      try {
        const created = await createTodoOnServer(newTitle);
        const synced = next.map((t) => (t.id === optimistic.id ? created : t));
        await saveTodos(synced);
        queryClient.setQueryData(["todos"], synced);
        return created;
      } catch (e) {
        if (e instanceof TypeError && e.message === "OFFLINE") {
          const queue = await readQueue();
          await writeQueue([...queue, { id: optimistic.id, title: newTitle }]);
          setQueueLen((n) => n + 1);
          return optimistic;
        }
        throw e;
      }
    },
  });
 
  const todos = todosQuery.data ?? [];
 
  return (
    <View style={styles.screen}>
      <ConnectivityChrome />
      {todosQuery.isFetching && <Text style={styles.meta}>Refrescando…</Text>}
      {queueLen > 0 && (
        <Text style={styles.meta}>{queueLen} cambio(s) esperando sincronización</Text>
      )}
 
      <Pressable
        style={styles.add}
        onPress={() => {
          const next = title.trim() || `Todo ${Date.now()}`;
          setTitle("");
          createMutation.mutate(next);
        }}
      >
        <Text style={styles.addLabel}>Añadir todo</Text>
      </Pressable>
 
      <FlatList
        data={todos}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text style={styles.row}>
            {item.pending ? "⏳ " : ""}
            {item.title}
          </Text>
        )}
        ListEmptyComponent={<Text style={styles.meta}>Sin todos aún.</Text>}
      />
 
      {todosQuery.isError && (
        <Pressable onPress={() => todosQuery.refetch()} style={styles.retry}>
          <Text style={styles.retryLabel}>Reintentar carga</Text>
        </Pressable>
      )}
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, backgroundColor: "#f8fafc" },
  banner: { padding: 10, borderRadius: 8, marginBottom: 10 },
  offline: { backgroundColor: "#fef3c7" },
  captive: { backgroundColor: "#ffedd5" },
  bannerText: { fontWeight: "600", color: "#78350f" },
  meta: { fontSize: 12, color: "#64748b", marginBottom: 8 },
  add: { backgroundColor: "#2563eb", padding: 12, borderRadius: 8, marginBottom: 12 },
  addLabel: { color: "#fff", fontWeight: "600", textAlign: "center" },
  row: { fontSize: 16, paddingVertical: 8, borderBottomWidth: StyleSheet.hairlineWidth, borderColor: "#e2e8f0" },
  retry: { marginTop: 12, padding: 12, backgroundColor: "#dc2626", borderRadius: 8, alignItems: "center" },
  retryLabel: { color: "#fff", fontWeight: "600" },
});

npx expo install @react-native-community/netinfo @react-native-async-storage/async-storage @tanstack/react-query

import { AppState, Platform } from "react-native";
import { focusManager, QueryClient } from "@tanstack/react-query";
 
// Vuelve a traer cuando la aplicación está en primer plano (se empareja con recuperación de red)
focusManager.setEventListener((handleFocus) => {
  const sub = AppState.addEventListener("change", (state) => {
    if (state === "active") handleFocus();
  });
  return () => sub.remove();
});
 
export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 2,
      staleTime: 30_000,
      gcTime: 24 * 60 * 60_000,
    },
  },
});

type QueueItem = {
  idempotencyKey: string;
  operation: "create" | "update" | "delete";
  payload: unknown;
  attempts: number;
};

import type { NetInfoState } from "@react-native-community/netinfo";
 
function isEffectivelyOffline(state: NetInfoState): boolean {
  if (state.isConnected === false) return true;
  if (state.isInternetReachable === false) return true;
  return false;
}
 
type NetworkFailure =
  | { kind: "offline" }
  | { kind: "timeout" }
  | { kind: "http"; status: number };
 
function classifyFetchError(error: unknown): NetworkFailure {
  if (error instanceof TypeError) return { kind: "offline" };
  return { kind: "timeout" };
}