Busca en todas las páginas de la documentación
10 ejemplos para entender cómo elegimos, fijamos y descontinuamos dependencias en mobile - 7 básicos e intermedios. Estos son los valores predeterminados del equipo para aplicaciones Expo SDK 57; hay libros de cocina más profundos para cada biblioteca en esta sección.
Comienza desde un proyecto con SDK 57 fijo. Las bibliotecas esenciales son valores predeterminados seleccionados - no todo paquete npm que resuelve un problema pertenece a una aplicación de envío.
npx create-expo-app@latest LibBasics --template default@sdk-57
cd LibBasics
npx expo install @tanstack/react-query @react-native-community/netinfo zustand
npx expo-doctorConfirma la fijación base antes de agregar módulos nativos:
{
"dependencies": {
"expo": "~57.0.4",
"react": "19.2.3",
"react-native": "0.86.0"
}
}Herramientas: Estos ejemplos apuntan a Expo SDK 57 (
expo~57.0.4), React Native 0.86.0 y React 19.2.3. Los módulos nativos requieren una compilación de desarrollo o compilación EAS - no solo Expo Go de serie cuando el paquete incluye código nativo personalizado.
Las decisiones de dependencias móviles comienzan con qué tipo de estado o E/S necesitas - no repositorios de tendencias.
┌────────────────────┬─────────────────────────┬──────────────────────────┐
│ Problema │ Biblioteca predeterminada│ No usar para │
├────────────────────┼─────────────────────────┼──────────────────────────┤
│ Caché API/servidor │ @tanstack/react-query │ Insignia de carrito, toggle de tema │
│ UI global del cliente│ zustand │ Filas del catálogo de productos │
│ KV local rápido │ react-native-mmkv │ Datos offline relacionales │
│ Listas largas │ @shopify/flash-list │ Pantalla de configuración de 8 filas │
│ Gestos / movimiento│ Reanimated 4 + RNGH │ Desvanecimiento de 200ms de una sola vez │
│ Reporte de fallos │ @sentry/react-native │ Console.log en prod │
└────────────────────┴─────────────────────────┴──────────────────────────┘npx expo install resuelve versiones; menos sorpresas de compilación nativaRelacionado: Conceptos básicos de gestión de estado - split servidor vs cliente
npx expo install - No npm sin procesarExpo mantiene una matriz de compatibilidad por SDK. Fijar manualmente react-native-reanimated@latest rompe compilaciones EAS cuando el ABI nativo no coincide con RN 0.86.
# Correcto - resuelve la versión compatible con SDK 57
npx expo install react-native-reanimated react-native-gesture-handler
# Arriesgado para módulos nativos - puede instalar semver incompatible
npm install react-native-reanimated# Verifica después de cualquier cambio de dependencia
npx expo-doctornpx expo install escribe el rango fijado con tilde que Expo probó contra tu SDKzod, @tanstack/react-query, zustand) pueden usar npm install - sin bridge nativoexpo-doctor en lanzamiento e integración continua nocturna - detecta desajuste antes de eas buildRelacionado: Conceptos básicos de Expo SDK - cuándo
npm installes aceptable
Cada biblioteca con código nativo trae autolinking, config plugins y tamaño binario de almacenamiento. Lee los documentos de instalación antes de fusionar.
# Después de agregar una biblioteca candidata
npx expo install react-native-mmkv
npx expo prebuild --dry-run # surfaces config plugin changes
npx expo-doctorLista de verificación antes de fusionar:
| Pregunta | Pasar | Fallar - diferir o encontrar alternativa |
|---|---|---|
| ¿Funciona en el flujo de trabajo administrado de Expo? | Sí | Requiere bifurcación simple |
¿Necesita config plugin en app.config? | Documentado | Diferencia nativa sorpresiva |
| ¿Requiere reconstrucción de cliente de desarrollo? | Planeado en sprint | Bloqueado en QA solo de Expo Go |
| ¿Duplica biblioteca existente? | Sin superposición | Consolidar primero |
expo prebuild --dry-run obtiene una vista previa de cambios de proyecto nativos sin escribir ios/ / android/Relacionado: Análisis de código muerto y dependencias - mantén el gráfico delgado
Fija el stack esencial en un PR durante el bootstrap del proyecto para que cada rama de característica herede las mismas versiones.
{
"dependencies": {
"expo": "~57.0.4",
"react": "19.2.3",
"react-native": "0.86.0",
"@tanstack/react-query": "^5.0.0",
"zustand": "^5.0.0",
"react-native-reanimated": "~4.0.0",
"react-native-gesture-handler": "~2.28.0",
"@sentry/react-native": "^6.0.0"
}
}Los pins nativos de lista/almacenamiento (@shopify/flash-list, react-native-mmkv, @react-native-community/netinfo) se escriben por npx expo install - no edites manualmente esos rangos.
npx expo install @tanstack/react-query @react-native-community/netinfo zustand \
@shopify/flash-list react-native-mmkv react-native-reanimated \
react-native-gesture-handler @sentry/react-nativenpx expo install establezca rangos compatibles exactos - no edites manualmente pins nativospackage.json, no conocimiento tribalEl error de biblioteca más costoso es duplicar datos de API en Zustand o Context cuando TanStack Query ya lo posee.
// ❌ Antipatrón - búsqueda manual + almacén global para datos del servidor
const useProductStore = create((set) => ({
products: [] as Product[],
load: async () => {
const res = await fetch("/products");
set({ products: await res.json() });
},
}));
// ✅ Patrón - Query posee caché del servidor; Zustand posee flags solo de UI
const { data: products } = useQuery({ queryKey: ["products"], queryFn: fetchProducts });
const filter = useFilterStore((s) => s.category); // solo clienteexpo-secure-storeRelacionado: TanStack Query - inmersión profunda completa del estado del servidor
No toda aplicación necesita react-native-mmkv desde el primer día. Comienza con AsyncStorage; actualiza cuando la generación de perfiles prueba que las lecturas sincrónicas importan.
Orden de elección de almacenamiento:
1. Estado React en memoria / Caché de Query → efímero
2. @react-native-async-storage/async-storage → JSON pequeño, hidratación de arranque
3. react-native-mmkv → lecturas sincrónicas de ruta activa cada fotograma
4. expo-sqlite → filas relacionales, migraciones, consultas
5. expo-secure-store → tokens, secretosnpx expo install @react-native-async-storage/async-storage
# Agrega MMKV solo después de que React DevTools Profiler muestre espera de almacenamiento en ruta crítica
npx expo install react-native-mmkvawait getItem en cada renderizado causa tartamudezRelacionado: react-native-mmkv - libro de cocina rápido de KV
@shopify/flash-list es una mejora de rendimiento - no un requisito del primer día para cada pantalla.
// Lista de configuración corta - FlatList está bien
import { FlatList } from "react-native";
// Feed pesado en imágenes con tartamudez de desplazamiento en Android - migra
import { FlashList } from "@shopify/flash-list";Lista de verificación de desencadenante de migración:
windowSize en FlatList no solucionó destellos en blanconpx expo install @shopify/flash-listFlatList de manera preventiva - la estimación de ajuste tiene un costoRelacionado: FlashList vs FlatList - compensaciones antes de adoptar
La descontinuación es una eliminación planeada - no dejar que un paquete se pudra en package.json hasta que la actualización explote.
# 1. Confirma importaciones cero
npx knip
npx depcheck
# 2. Elimina paquete y entrada de lockfile
npm uninstall legacy-state-library
# 3. Elimina config plugin nativo de app.config.ts si está presente
# 4. Reconstruye cliente de desarrollo - autolinking debe soltar el módulo nativo
eas build --profile development --platform all
# 5. Verifica en el dispositivo
npx expo-doctor// app.config.ts - elimina estancia de plugin al descontinuar
export default {
plugins: [
// ["legacy-library-expo-plugin"], ← delete
"expo-router",
],
};Relacionado: Análisis de código muerto y dependencias
Estandariza preguntas de revisión para que cada biblioteca nueva obtenga el mismo nivel de escrutinio.
## PR de dependencia: @shopify/flash-list
- [ ] Clase de problema documentada (rendimiento de lista - pantalla de feed)
- [ ] Instalado con `npx expo install`
- [ ] `npx expo-doctor` limpio
- [ ] Reconstrucción nativa programada / completada
- [ ] Sin biblioteca duplicada (FlatList permanece para configuración)
- [ ] Impacto de bundle anotado (tamaño de fuente + nativo)
- [ ] Plan de prueba en dispositivo Android físico
- [ ] ADR actualizado si esto cambia el valor predeterminado del equipo# .github/workflows/pr-checks.yml - agregar en PRs etiquetados con dependencias
- name: Expo doctor
if: contains(github.event.pull_request.labels.*.name, 'dependencies')
run: npx expo-doctordependencies - desencadena pasos de CI adicionalesexpo-doctor falla - desajuste de versiones es más barato de arreglar en PR que en cola EASLos bumps de SDK son cuando las bibliotecas desacopladas o duplicadas duelen más. Ejecuta un paso de reconciliación antes de fusionar el PR del SDK.
# Flujo de trabajo de actualización (simplificado)
npx expo install expo@~57.0.4 --fix
npx expo-doctor
npx knip
npm run typecheck && npm test
# Reinstala stack nativo esencial contra nueva matriz
npx expo install react-native-reanimated react-native-gesture-handler \
react-native-mmkv @shopify/flash-list @sentry/react-native
eas build --profile preview --platform all| Paso | Objetivo |
|---|---|
expo install --fix | Alinea todos módulos expo-* a SDK 57 |
expo-doctor | Detecta dependencias del mismo nivel incompatibles |
knip | Elimina bibliotecas que murieron durante el último ciclo de lanzamiento |
| Compilación EAS de vista previa | Valida compilación nativa antes de etiqueta de producción |
| Re-lee config de Babel | Plugin de Reanimated debe permanecer último |
Relacionado: Actualización de versiones de Expo SDK
| Antipatrón | Por qué falla |
|---|---|
npm install cada módulo nativo | Desajuste de versiones - errores de compilación nativa EAS |
| Redux + Zustand + Context para mismo carrito | Tres fuentes de verdad; pesadilla de limpieza de cierre de sesión |
| FlashList en todas partes desde el primer día | Costo de estimación de ajuste sin ganancia medible |
| Mantener módulos nativos no utilizados "por si acaso" | Inflamación de autolinking; dolor de actualización del SDK |
| Omitir reconstrucción de cliente de desarrollo después de agregar nativo | "Funciona en Metro" pero se bloquea en dispositivo |
| Dos reportes de fallos | Eventos duplicados; doble sobrecarga del SDK |
TanStack Query, Zustand, MMKV, FlashList, Reanimated + Gesture Handler y Sentry - el stack de producción predeterminado para aplicaciones Expo SDK 57 en este sitio de documentación.
Sí - es solo JS sin módulo nativo de Expo. Aún fija un rango semver y confirma el lockfile. Para cualquier paquete que Expo documenta en la referencia del SDK, prefiere npx expo install.
Un almacén de Zustand por dominio (carrito, preferencias, incorporación) - no un mega-almacén. Ver zustand.
Siempre que el paquete agregue código nativo o un config plugin - MMKV, FlashList, Sentry, Reanimated. Los paquetes solo JS necesitan reinicio de Metro solamente.
Escribe un ADR corto: problema, alternativas consideradas, costo nativo, plan de descontinuación. Vinculalo desde el PR de dependencia.
Versiones de stack: Esta página se escribió para React 19.2.3, React Native 0.86.0 y Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última actualización: 19 jul 2026