upgrading-expo

Par expo · skills

Directives pour la mise à niveau des versions du SDK Expo et la résolution des problèmes de dépendances

npx skills add https://github.com/expo/skills --skill upgrading-expo

Références

  • ./references/new-architecture.md -- SDK +53: Guide de migration vers la nouvelle architecture
  • ./references/react-19.md -- SDK +54: Changements React 19 (useContext → use, Context.Provider → Context, suppression de forwardRef)
  • ./references/react-compiler.md -- SDK +54: Guide de configuration et migration du compilateur React
  • ./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 -- Migrer la lecture et l'enregistrement audio de expo-av vers expo-audio
  • ./references/expo-av-to-video.md -- Migrer la lecture vidéo de expo-av vers expo-video

Versions Bêta/Aperçu

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

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

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

Processus de mise à jour étape par étape

  1. Mettre à jour Expo et les dépendances
npx expo install expo@latest
npx expo install --fix
  1. Exécuter les diagnostics : npx expo-doctor

  2. Vider les caches et réinstaller

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

Liste de vérification des changements cassants

  • Vérifier les API supprimées dans les notes de version
  • Mettre à jour les chemins d'import pour les modules déplacés
  • Examiner les changements des modules natifs nécessitant une prégénération
  • Tester toutes les fonctionnalités de caméra, audio et vidéo
  • Vérifier que la navigation fonctionne toujours correctement

Prégénération pour les changements natifs

Vérifier d'abord si les répertoires ios/ et android/ existent dans le projet. Si aucun de ces 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 compilation — ignorer cette section et la section « Vider les caches pour le workflow bare » entièrement.

Si la mise à jour nécessite des changements natifs :

npx expo prebuild --clean

Cela régénère les répertoires ios et android. S'assurer que le projet n'est pas une application avec workflow bare avant d'exécuter cette commande.

Maintenance pour le workflow bare

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

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

Nettoyage

  • Consulter les notes de version pour la version SDK cible sur https://expo.dev/changelog
  • Si vous utilisez Expo SDK 54 ou ultérieur, s'assurer que react-native-worklets est installé — c'est requis pour que react-native-reanimated fonctionne.
  • Activer le compilateur React dans SDK 54+ en ajoutant "experiments": { "reactCompiler": true } à app.json — c'est stable et recommandé
  • Supprimer sdkVersion de app.json pour laisser Expo le gérer automatiquement
  • Supprimer les packages implicites de package.json : @babel/core, babel-preset-expo, expo-constants.
  • Si babel.config.js contient uniquement « babel-preset-expo », supprimer le fichier
  • Si metro.config.js contient uniquement les paramètres par défaut d'Expo, supprimer le fichier

Packages obsolètes

Ancien package Remplacement
expo-av expo-audio et expo-video
expo-permissions API de permissions des packages individuels
@expo/vector-icons expo-symbols (pour les symboles SF)
AsyncStorage expo-sqlite/localStorage/install
expo-app-loading expo-splash-screen
expo-linear-gradient experimental_backgroundImage + dégradés CSS dans View

Lors de la migration de packages obsolètes, mettre à jour tout le code avant de supprimer l'ancien package. Pour expo-av, consulter 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érifier si package.json contient des packages exclus :

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

Les exclusions sont souvent des contournements qui pourraient ne plus être nécessaires après la mise à jour. Examiner chacune d'entre elles.

Suppression des patches

Vérifier s'il y a des patches obsolètes dans le répertoire patches/. Les supprimer s'ils ne sont plus nécessaires.

Postcss

  • autoprefixer n'est pas nécessaire dans SDK +53. Le supprimer des dépendances et vérifier postcss.config.js ou postcss.config.mjs pour le supprimer de la liste des plugins.
  • Utiliser postcss.config.mjs dans SDK +53.

Metro

Supprimer 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 supportées par défaut dans SDK +50.
  • Expo webpack est obsolète, migrer vers Expo Router et Metro web.

Moteur Hermes v1

Depuis SDK 55, les utilisateurs peuvent opter pour utiliser le moteur Hermes v1 pour des performances d'exécution améliorées. Cela nécessite de définir useHermesV1: true dans la configuration du plugin expo-build-properties, et peut nécessiter une version spécifique du package npm hermes-compiler. Hermes v1 deviendra la valeur par défaut dans une future version du SDK.

Nouvelle architecture

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

Skills similaires