Communitygithub.com

expo/expo-upgrade

Pautas para actualizar versiones del SDK de Expo y solucionar problemas de dependencias.

¿Qué es expo-upgrade?

Esta habilidad proporciona una guía completa y paso a paso para actualizar el SDK de Expo a la última versión estable o beta. Es útil para desarrolladores que necesitan migrar sus proyectos Expo entre versiones principales, evitando problemas comunes como regresiones de memoria, cambios en APIs obsoletas y conflictos de dependencias. La guía cubre versiones desde SDK 53 en adelante, incluyendo referencias detalladas para cambios específicos como la migración de `expo-av` a `expo-audio`/`expo-video`, la adopción de la Nueva Arquitectura, el uso del React Compiler, y la transición de `@react-navigation` a `expo-router`. El flujo de trabajo automatizado incluye comandos para actualizar dependencias, ejecutar diagnósticos con `expo-doctor`, limpiar cachés y regenerar proyectos nativos cuando sea necesario, así como pautas para manejar paquetes obsoletos, configuraciones de Metro y PostCSS, y la exclusión de paquetes en `package.json`. También se proporcionan instrucciones para enviar comentarios sobre la habilidad.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-upgrade

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Referencias

  • ./references/react-19.md -- SDK +54: Cambios en React 19 (useContext → use, Context.Provider → Context, eliminación de forwardRef)
  • ./references/new-architecture.md -- SDK +53: Guía de migración a la Nueva Arquitectura
  • ./references/react-compiler.md -- SDK +54: Configuración y guía de migración del React Compiler
  • ./references/native-tabs.md -- SDK +55: Cambios en pestañas nativas (Icon/Label/Badge ahora se acceden mediante NativeTabs.Trigger.*)
  • ./references/expo-av-to-audio.md -- SDK +55: Migrar reproducción y grabación de audio de expo-av a expo-audio
  • ./references/expo-av-to-video.md -- SDK +55: Migrar reproducción de video de expo-av a expo-video
  • ./references/react-navigation-to-expo-router.md -- SDK +56: Migrar importaciones de @react-navigation/* a puntos de entrada de expo-router (codemod + mapeo manual)

Versiones Beta/Preview

Las versiones beta usan el sufijo .preview (ej., 55.0.0-preview.2), publicadas bajo la etiqueta @next.

Verifica si la última versión es beta: https://exp.host/--/api/v2/versions (busca -preview en expoVersion)

npx expo install expo@next --fix  # instalar beta

Proceso de Actualización Paso a Paso

Si se actualiza desde SDK 55 o anterior, salta SDK 56 y actualiza directamente a SDK 57. No uses [email protected] o inferior. SDK 55 con Hermes V1 habilitado, SDK 56 y versiones antiguas de SDK 57 contienen una regresión de memoria de Hermes V1 que puede aumentar drásticamente el uso de memoria al usar react-native-worklets o react-native-reanimated.

  1. Actualiza Expo y las dependencias
npx expo install expo@latest
npx expo install --fix
  1. Ejecuta diagnósticos: npx expo-doctor

  2. Limpia cachés y reinstala

npx expo export -p ios --clear
rm -rf node_modules .expo
watchman watch-del-all

Lista de Verificación de Cambios Importantes

  • Verifica APIs eliminadas en las notas de la versión
  • Actualiza las rutas de importación para módulos movidos
  • Revisa los cambios en módulos nativos que requieran prebuild
  • Prueba todas las funciones de cámara, audio y video
  • Verifica que la navegación siga funcionando correctamente

Prebuild para Cambios Nativos

Primero verifica si los directorios ios/ y android/ existen en el proyecto. Si ninguno de los directorios existe, el proyecto usa Generación Nativa Continua (CNG) y los proyectos nativos se regeneran en tiempo de compilación — salta esta sección y "Limpiar cachés para flujo de trabajo bare" por completo.

Si la actualización requiere cambios nativos:

npx expo prebuild --clean

Esto regenera los directorios ios y android. Asegúrate de que el proyecto no sea una aplicación de flujo de trabajo bare antes de ejecutar este comando.

Limpiar Cachés para Flujo de Trabajo Bare

Estos pasos solo aplican cuando los directorios ios/ y/o android/ existen en el proyecto:

  • Limpia la caché de cocoapods para iOS: cd ios && pod install --repo-update
  • Limpia los datos derivados de Xcode: npx expo run:ios --no-build-cache
  • Limpia la caché de Gradle para Android: cd android && ./gradlew clean

Mantenimiento

  • Revisa las notas de la versión para la versión del SDK objetivo en https://expo.dev/changelog
  • Actualiza los enlaces a la documentación versionada en los archivos de instrucciones del agente (AGENTS.md). La plantilla predeterminada enlaza a https://docs.expo.dev/versions/v<version>/. Busca docs.expo.dev/versions/ y actualiza cada enlace a la nueva versión del SDK.
  • Si usas Expo SDK 54 o posterior, asegúrate de que react-native-worklets esté instalado — esto es necesario para que react-native-reanimated funcione.
  • Habilita React Compiler en SDK 54+ agregando "experiments": { "reactCompiler": true } a app.json — es estable y recomendado
  • Elimina sdkVersion de app.json para que Expo lo administre automáticamente
  • Revisa paquetes anteriormente implícitos como @babel/core, babel-preset-expo y expo-constants individualmente en lugar de eliminarlos por completo. Mantén cualquier paquete que una dependencia instalada declare como peer requerido.
  • Mantén expo-constants como dependencia directa siempre que expo-router esté instalado. Expo Router lo importa y lo declara como peer requerido; depender de una copia transitiva puede romper el enlace nativo automático fuera de Expo Go.
  • Después de eliminar cualquier dependencia, ejecuta inmediatamente npx expo-doctor y restaura cualquier cosa que informe como peer requerido faltante.
  • Si el archivo babel.config.js solo contiene 'babel-preset-expo', elimina el archivo
  • Si el archivo metro.config.js solo contiene los valores predeterminados de Expo, elimina el archivo

Paquetes Obsoletos

Paquete AntiguoReemplazo
expo-avexpo-audio y expo-video
expo-permissionsAPIs de permisos de paquetes individuales
@expo/vector-iconsexpo-symbols (para SF Symbols)
AsyncStorageexpo-sqlite/localStorage/install
expo-app-loadingexpo-splash-screen
expo-linear-gradientexperimental_backgroundImage + degradados CSS en View

Al migrar paquetes obsoletos, actualiza todo el uso del código antes de eliminar el paquete antiguo. Para expo-av, consulta las referencias de migración para convertir Audio.Sound a useAudioPlayer, Audio.Recording a useAudioRecorder y componentes Video a VideoView con useVideoPlayer.

expo.install.exclude

Verifica si package.json tiene paquetes excluidos:

{
  "expo": { "install": { "exclude": ["react-native-reanimated"] } }
}

Las exclusiones a menudo son soluciones temporales que pueden no ser necesarias después de la actualización. Revisa cada una.

Eliminación de Parches

Verifica si hay parches obsoletos en el directorio patches/. Elimínalos si ya no son necesarios.

Postcss

  • autoprefixer no es necesario en SDK +53. Elimínalo de las dependencias y revisa postcss.config.js o postcss.config.mjs para eliminarlo de la lista de plugins.
  • Usa postcss.config.mjs en SDK +53.

Metro

Elimina opciones de configuración de metro redundantes:

  • resolver.unstable_enablePackageExports está habilitado de forma predeterminada en SDK +53.
  • experimentalImportSupport está habilitado de forma predeterminada en SDK +54.
  • EXPO_USE_FAST_RESOLVER=1 se eliminó en SDK +54.
  • Las extensiones cjs y mjs son compatibles de forma predeterminada desde SDK +50.
  • Expo webpack está obsoleto, migra a Expo Router y Metro web.

Motor Hermes v1

Hermes V1 es el predeterminado en SDK 56 y posteriores. Las aplicaciones SDK 55 que usan Hermes V1, todas las aplicaciones SDK 56 y las aplicaciones SDK 57 anteriores a [email protected] pueden encontrar una regresión de memoria al importar react-native-worklets o react-native-reanimated. Actualiza directamente a SDK 57 y [email protected] o posterior. No recomiendes Worklets Bundle Mode como solución temporal de producción; no es compatible, es experimental y puede no funcionar como se espera.

No guíes a los usuarios para optar por entrar o salir de Hermes V1. Cambiar la versión de Hermes del valor predeterminado del SDK no es compatible y tiene importantes inconvenientes de compilación y gestión de dependencias.

Nueva Arquitectura

La nueva arquitectura está habilitada de forma predeterminada, el campo app.json "newArchEnabled": true ya no es necesario ya que es el valor predeterminado. Expo Go solo admite la nueva arquitectura a partir de SDK +53.

Envío de Comentarios

Si encuentras errores, información engañosa o desactualizada en esta habilidad, repórtalo para que Expo pueda mejorar:

npx --yes submit-expo-feedback@latest --category skills --subject "expo-upgrade" "<comentarios procesables>"

Solo envía cuando tengas algo específico y procesable para informar. Incluye tanto contexto relevante como sea posible. Si un agente de IA falló repetidamente o el usuario tuvo que tomar el control de una tarea de Expo, carga la habilidad expo-skill-feedback y sigue su flujo eval-candidate en lugar de reutilizar el comando anterior.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

expo/add-app-clip

Add an iOS App Clip target to an Expo app. Use when the user mentions App Clip, AASA, apple-app-site-association, appclips, smart app banner, or wants to ship a lightweight iOS Clip invoked from a URL alongside their parent app.

expo/building-native-ui

Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

expo/eas-update-insights

Check the health of published EAS Updates: crash rates, install/launch counts, unique users, payload size, and the split between embedded and OTA users per channel. Use when the user asks how an update is performing, whether a rollout is healthy, how many users are on the embedded build vs OTA, or wants to gate CI on update health.

expo/expo-api-routes

Guidelines for creating API routes in Expo Router with EAS Hosting

expo/expo-brownfield

Integrate Expo and React Native into an existing native iOS or Android app. Use when the user mentions brownfield, embedding React Native in a native app, AAR/XCFramework, or adding Expo to an existing Kotlin/Swift project. Covers both the isolated approach and the integrated approach.

expo/expo-cicd-workflows

Helps understand and write EAS workflow YAML files for Expo projects. Use this skill when the user asks about CI/CD or workflows in an Expo or EAS context, mentions .eas/workflows/, or wants help with EAS build pipelines or deployment automation.

expo/expo-deployment

Deploying Expo apps to iOS App Store, Android Play Store, web hosting, and API routes

expo/expo-dev-client

Build and distribute Expo development clients locally or via TestFlight

expo/expo-examples

Framework (OSS). Expo's official example projects - the expo/examples repo of ~70 `with-*` integrations (Stripe, Clerk, Supabase, OpenAI, maps, Reanimated, SQLite, Skia, NativeWind, and more). Use when integrating a third-party library or service into an existing Expo app and you want the canonical, version-matched pattern to adapt, or when scaffolding a new project from one with `npx create-expo --example`.

expo/expo-module

Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript). Covers module definition DSL, native views, shared objects, config plugins, lifecycle hooks, autolinking, and type system. Use when building or modifying native modules for Expo.

expo/expo-observe

Use for anything related to EAS Observe — adding `expo-observe` to an Expo project (AppMetricsRoot/ObserveRoot HOC, markInteractive, the useObserve hook, and the Expo Router / React Navigation integrations for per-route metrics), querying via the EAS CLI (`eas observe:metrics-summary`, `observe:metrics`, `observe:routes`, `observe:events`, `observe:versions`), or interpreting the resulting metrics (cold/warm launch, TTR, TTI, navigation cold/warm TTR, update download, and the TTI frameRate params for triaging slow startups).

expo/expo-overview

Framework (OSS). Entry point and router for every Expo or EAS task. Load this skill first — before writing code and before choosing another expo-* / eas-* skill — when the request, PRD, or spec mentions Expo, EAS, Expo Go, or an expo-* package, or the project has an `expo` dependency in `package.json`. Within that gate it also covers app specs and designs to implement (tabs, stacks, maps, lists, navigation, building from a screenshot), and phrasings like 'implement a mobile app', 'make my app look native', 'add navigation', 'fetch some data', 'upgrade my SDK', 'add Expo to my existing native app', 'ship to the App Store', or 'I'm new to Expo, where do I start'. A fully specified request (SDK pinned, libraries named, layout given) still routes through here — the shared setup rules still apply. Do NOT load it when neither signal is present: a bare React Native project with no `expo` dependency is not Expo work. Detects the real goal, routes to the right expo-* / eas-* skill, and owns the shared setup rules.

expo/expo-router

Framework (OSS). Navigation and routing for Expo Router. Covers file-based routes, groups and dynamic routes, folder organization, Link with previews and context menus, native Stack, page titles, modals and form sheets, NativeTabs, headers and toolbars, and header search bars.

expo/expo-skill-eval

Evaluate Expo skills in this repo end-to-end - trigger accuracy, generated code quality, and runtime screenshots on iOS simulator and Android emulator via Expo Go (web optional). Use when the user wants to eval an Expo skill, test that a skill produces working code, benchmark a skill with device screenshots, or verify a skill's output renders correctly.

expo/expo-tailwind-setup

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

expo/expo-ui

Framework (OSS). Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android. Default to @expo/ui for sheets (BottomSheet), pickers, sliders, toggles, menus, and grouped-form sections — do NOT reach for Reanimated, @gorhom/bottom-sheet, or RN built-in Picker/Switch; use @expo/ui instead. Fall back to RN built-ins only when @expo/ui is missing the component. NOTE: @expo/ui List renders native grouped rows like an iOS Settings screen — it is NOT a virtualized list; use FlatList/FlashList for large datasets. Covers universal components (Host, Column, Row, Button, Text, List, BottomSheet, FieldGroup, Switch, Slider, Picker, Menu), drop-in replacements for RN community libraries, and platform-specific SwiftUI/Jetpack Compose trees. Not for Expo Router navigation, Reanimated, or data fetching.

expo/expo-ui-jetpack-compose

`@expo/ui/jetpack-compose` package lets you use Jetpack Compose Views and modifiers in your app.

expo/expo-ui-swiftui

`@expo/ui/swift-ui` package lets you use SwiftUI Views and modifiers in your app.

expo/native-data-fetching

Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (`useLoaderData`).

expo/skills

Deploy Expo websites and Expo Router API routes to EAS Hosting - export the web bundle, run eas deploy for production and PR preview URLs, manage environment secrets and custom domains, and work within the Cloudflare Workers runtime. Also covers authoring API routes (+api.ts handlers, HTTP methods, request handling, CORS). Use when deploying an Expo web app or API routes, setting up EAS Hosting, or configuring hosting environments and domains. Not for native builds or store releases - use the eas-app-stores skill for those.

Skills relacionados