Communitygithub.com

expo/expo-upgrade

Framework (OSS). Directives pour la mise à niveau des versions SDK Expo et la résolution des problèmes de dépendances.

Qu'est-ce que expo-upgrade ?

Ce skill guide les développeurs et les agents IA dans le processus de mise à niveau des SDK Expo, en gérant les changements de version depuis SDK 54 jusqu'à la dernière version. Il fournit des instructions étape par étape pour la mise à niveau d'Expo et de ses dépendances, l'exécution de diagnostics (`npx expo-doctor`), le nettoyage des caches et la reconstruction des projets natifs. Le skill fait référence à de nombreux documents spécialisés pour les migrations complexes, comme le passage de `react-navigation` à `expo-router`, de `expo-av` à `expo-audio`/`expo-video`, et l'activation du React Compiler. Il traite également des packages obsolètes, des configurations Metro et PostCSS, et des précautions concernant le moteur Hermes V1 et la Nouvelle Architecture. Enfin, il inclut une section pour soumettre des retours sur le skill lui-même, facilitant l'amélioration continue de l'outil.

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

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Références

  • ./references/react-19.md -- SDK +54 : Changements React 19 (useContext → use, Context.Provider → Context, suppression de forwardRef)
  • ./references/new-architecture.md -- SDK +53 : Guide de migration vers la Nouvelle Architecture
  • ./references/react-compiler.md -- SDK +54 : Guide d'installation et de migration du React Compiler
  • ./references/native-tabs.md -- SDK +55 : Changements des onglets natifs (Icon/Label/Badge désormais accessibles via NativeTabs.Trigger.*)
  • ./references/expo-av-to-audio.md -- SDK +55 : Migrer la lecture et l'enregistrement audio de expo-av vers expo-audio
  • ./references/expo-av-to-video.md -- SDK +55 : Migrer la lecture vidéo de expo-av vers expo-video
  • ./references/react-navigation-to-expo-router.md -- SDK +56 : Migrer les imports @react-navigation/* vers les points d'entrée expo-router (codemod + mapping manuel)

Versions Bêta/Prévisualisation

Les versions bêta utilisent le suffixe .preview (ex. 55.0.0-preview.2), publiées sous le tag @next.

Vérifiez si la dernière version est bêta : https://exp.host/--/api/v2/versions (cherchez -preview dans expoVersion)

npx expo install expo@next --fix  # installer la bêta

Processus de Mise à Niveau Étape par Étape

Si vous mettez à niveau depuis SDK 55 ou antérieur, sautez SDK 56 et mettez à niveau directement vers SDK 57. N'utilisez pas [email protected] ou inférieur. SDK 55 avec Hermes V1 activé, SDK 56 et les anciennes versions de SDK 57 contiennent une régression mémoire Hermes V1 qui peut augmenter considérablement l'utilisation de la mémoire lors de l'utilisation de react-native-worklets ou react-native-reanimated.

  1. Mettez à niveau Expo et les dépendances
npx expo install expo@latest
npx expo install --fix
  1. Exécutez les diagnostics : npx expo-doctor

  2. Effacez les caches et réinstallez

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

Liste de Vérification des Changements Casseurs

  • Vérifiez les API supprimées dans les notes de version
  • Mettez à jour les chemins d'import pour les modules déplacés
  • Examinez les modifications des modules natifs nécessitant un prebuild
  • Testez toutes les fonctionnalités de caméra, audio et vidéo
  • Vérifiez que la navigation fonctionne toujours correctement

Prebuild pour les Modifications Natives

Vérifiez d'abord si les répertoires ios/ et android/ existent dans le projet. Si aucun des deux répertoires n'existe, le projet utilise la Génération Native Continue (CNG) et les projets natifs sont régénérés au moment de la build — ignorez cette section et "Effacer les caches pour le workflow bare" entièrement.

Si la mise à niveau nécessite des modifications natives :

npx expo prebuild --clean

Ceci régénère les répertoires ios et android. Assurez-vous que le projet n'est pas une application bare workflow avant d'exécuter cette commande.

Effacer les Caches pour le Workflow Bare

Ces étapes s'appliquent uniquement lorsque les répertoires ios/ et/ou android/ existent dans le projet :

  • Effacez le cache CocoaPods pour iOS : cd ios && pod install --repo-update
  • Effacez les données dérivées pour Xcode : npx expo run:ios --no-build-cache
  • Effacez le cache Gradle pour Android : cd android && ./gradlew clean

Entretien

  • Consultez les notes de version pour la version SDK cible sur https://expo.dev/changelog
  • Mettez à jour les liens de la documentation versionnée dans les fichiers d'instructions de l'agent (AGENTS.md). Le modèle par défaut pointe vers https://docs.expo.dev/versions/v<version>/. Recherchez docs.expo.dev/versions/ et mettez à jour chaque lien vers la nouvelle version SDK.
  • Si vous utilisez Expo SDK 54 ou ultérieur, assurez-vous que react-native-worklets est installé — ceci est requis pour le fonctionnement de react-native-reanimated.
  • Activez React Compiler dans SDK 54+ en ajoutant "experiments": { "reactCompiler": true } dans app.json — c'est stable et recommandé
  • Supprimez sdkVersion de app.json pour laisser Expo le gérer automatiquement
  • Examinez les packages auparavant implicites comme @babel/core, babel-preset-expo et expo-constants individuellement au lieu de les supprimer en bloc. Conservez tout package qu'une dépendance installée déclare comme peer obligatoire.
  • Conservez expo-constants comme dépendance directe à chaque fois qu'expo-router est installé. Expo Router l'importe et le déclare comme peer obligatoire ; se fier à une copie transitive peut casser l'autolinking natif en dehors d'Expo Go.
  • Après avoir supprimé une dépendance, exécutez immédiatement npx expo-doctor et restaurez tout ce qu'il signale comme peer obligatoire manquant.
  • Si le fichier babel.config.js ne contient que 'babel-preset-expo', supprimez le fichier
  • Si le fichier metro.config.js ne contient que les valeurs par défaut d'Expo, supprimez le fichier

Packages Obsolètes

Ancien PackageRemplacement
expo-avexpo-audio et expo-video
expo-permissionsAPI de permissions de packages individuels
@expo/vector-iconsexpo-symbols (pour les SF Symbols)
AsyncStorageexpo-sqlite/localStorage/install
expo-app-loadingexpo-splash-screen
expo-linear-gradientexperimental_backgroundImage + gradients CSS dans View

Lors de la migration des packages obsolètes, mettez à jour toute l'utilisation du code avant de supprimer l'ancien package. Pour expo-av, consultez les références de migration pour convertir Audio.Sound en useAudioPlayer, Audio.Recording en useAudioRecorder et les composants Video en VideoView avec useVideoPlayer.

expo.install.exclude

Vérifiez si package.json a des packages exclus :

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

Les exclusions sont souvent des solutions de contournement qui peuvent ne plus être nécessaires après la mise à niveau. Examinez chacune d'elles.

Supprimer les Patches

Vérifiez s'il y a des patches obsolètes dans le répertoire patches/. Supprimez-les s'ils ne sont plus nécessaires.

Postcss

  • autoprefixer n'est pas nécessaire dans SDK +53. Supprimez-le des dépendances et vérifiez postcss.config.js ou postcss.config.mjs pour le retirer de la liste des plugins.
  • Utilisez postcss.config.mjs dans SDK +53.

Metro

Supprimez les options de configuration Metro redondantes :

  • resolver.unstable_enablePackageExports est activé par défaut dans SDK +53.
  • experimentalImportSupport est activé par défaut dans SDK +54.
  • EXPO_USE_FAST_RESOLVER=1 est supprimé dans SDK +54.
  • Les extensions cjs et mjs sont prises en charge par défaut depuis SDK +50.
  • Expo webpack est obsolète, migrez vers Expo Router et Metro web.

Moteur Hermes v1

Hermes V1 est le moteur par défaut sur SDK 56 et ultérieur. Les applications SDK 55 utilisant Hermes V1, toutes les applications SDK 56 et les applications SDK 57 avant [email protected] peuvent rencontrer une régression mémoire lors de l'import de react-native-worklets ou react-native-reanimated. Mettez à niveau directement vers SDK 57 et [email protected] ou ultérieur. Ne recommandez pas le Worklets Bundle Mode comme solution de contournement de production ; il n'est pas pris en charge, est expérimental et peut ne pas fonctionner comme prévu.

Ne guidez pas les utilisateurs pour activer ou désactiver Hermes V1. Changer la version d'Hermes par rapport à la valeur par défaut du SDK n'est pas pris en charge et comporte des mises en garde importantes concernant la build et la gestion des dépendances.

Nouvelle Architecture

La nouvelle architecture est activée par défaut, le champ app.json "newArchEnabled": true n'est plus nécessaire car c'est la valeur par défaut. Expo Go ne prend en charge que la nouvelle architecture à partir de SDK +53.

Soumettre un Retour

Si vous rencontrez des erreurs, des informations trompeuses ou obsolètes dans ce skill, signalez-le pour qu'Expo puisse s'améliorer :

npx --yes submit-expo-feedback@latest --category skills --subject "expo-upgrade" "<retour actionnable>"

Soumettez uniquement lorsque vous avez quelque chose de spécifique et d'actionnable à signaler. Incluez autant de contexte pertinent que possible. Si un agent IA a échoué à plusieurs reprises ou si l'utilisateur a dû prendre le relais sur une tâche Expo, chargez le skill expo-skill-feedback et suivez son flux eval-candidate au lieu de réutiliser la commande ci-dessus.

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 associés