Mettre à jour Flipper debugger dans un projet react native

Introduction

J’ai eu envie de mettre à jour le Package flipper, car une erreur, apparaissez dans le logiciel (RSockets are being deprecated at Flipper. Please, use the latest Flipper client in your app to migrate to WebSockets.). La version avec laquelle j'étais était là 0.125.0. J'ai donc essayé de chercher sur Internet comment mettre à jour Flipper dans un Projets React Native, je n'ai rien trouvé. Avec un peu de galères, j’ai pu trouver comment mettre à jour Flipper, voici la solution.

⚠️ Ce tutoriel porte uniquement sur les version de React Native supérieure ou égale à la version 0.69.0 (=> 0.69.0)

---

Sommaire

Tutoriels étapes par étapes

1. Identifier la version du logiciel Flipper

Tout d’abord, vous devrez vérifier la version du logiciel Flipper installé sur votre Mac.

La version du logiciel Flipper

2. Modifier la version de Flipper pour Android

2.1 Changement de la version

Rendez-vous sur le fichier android/gradle.properties pour éditer la configuration de Gradle, l’outil qui build votre application android.

Trouver la propriété ci-dessous

# Avec la version actuel de Flipper (ex. 0.125.0)
FLIPPER_VERSION=0.125.0

Modifier la valeur en 0.176.1 (la version de Flipper que vous avez choisis)

FLIPPER_VERSION=0.176.1

2.2 Vérifications

Ouvrez un terminal et nous allons effectuer un clean du build Android pour vérifier que tout fonctionne coté Android.

cd android && ./gradlew clean

3. Modifier la version de Flipper pour iOS

3.1 Changement de la version

Pour changer la version de Flipper coté iOS, rendez-vous sur le fichier ios/Podfile

Trouver la propriété :flipper_configuration et modifier la valeur comme ceci

# Valeur initial
# :flipper_configuration => FlipperConfiguration.enabled,
:flipper_configuration => FlipperConfiguration.enabled(["Debug"], { 'Flipper' => '
0.176.1' }),

3.2 Vérifications

Ouvrez un terminal est déplacer vous dans le dossier ios pour mettre à jour les dépendances Cocoapods. Voici la commande a exécuté :

pod install --repo-update

Si l’installation se passe sans encombre (erreurs), vous avez fini, bravo ! 🎉

Ce qui n’était pas mon cas 😅

---

Résolutions les problèmes d’installations sur IOS

Incompatibilité du processeur

Voici un extrait de l’erreur pod qui est survenue et comment la fixer.

LoadError - dlopen(/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/lib/ffi_c.bundle, 0x0009): tried: '/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/lib/ffi_c.bundle' (mach-o file, but is an incompatible architecture (have (x86_64), need (arm64e))) - /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/lib/ffi_c.bundle
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/System/Library/Frameworks/Ruby.fra
...

Ici, c'est l’architecture du processeur qui pose un problème, je travaille effectivement sur un Mac Apple Silicon, ce qui signifie que l’architecture du processeur correspond à arm64. Par sécurité, je décide de réinstaller CocoaPods proprement (la réponse StackOverflow qui m’a aidé)

# Uninstall the local cocoapods gem
sudo gem uninstall cocoapods

# Reinstall cocoapods via Homebrew
brew install cocoapods

Une fois cela fait, j’ai ré-exécuté la commande pour mettre à jour les dépendances de CocoaPods.

# in /ios
pod install --repo-update

Erreur de dépendances cocoapods

Et là une nouvelle erreur 😢 (après avoir exécuté pod install --repo-update)

[!] CocoaPods could not find compatible versions for pod "FlipperKit/FlipperKitUserDefaultsPlugin":
  In Podfile:
    FlipperKit/FlipperKitUserDefaultsPlugin (= 0.176.1)

None of your spec sources contain a spec satisfying the dependency: `FlipperKit/FlipperKitUserDefaultsPlugin (= 0.176.1)`. # FlipperKit don't have a 0.176.1 version

Ici, c'est donc la dépendance FlipperKit qui est incompatible avec la version 0.176.1🙄.

Pour vérifier cela, rdv sur l’outil de recherche de package CocoaPods cocoapods.org/pods/FlipperKit

Le package actuel n’est peut-être pas celui qui vous pose un problème, rechercher sur le site cocoapods.org/pods le pod qui pose un problème afin de vérifier la version.

En effet, il n’existe pas de version 0.176.1 comme notifier dans l’erreur.

Pour résoudre ce soucis, il vous suffit de modifier la version de Flipper en une version compatible avec les dépendances (en l’occurrence 0.175.0 pour mon cas). Pour vérifier que la nouvelle version choisie fonctionne, nous allons mettre à jour les dépendances, toujours avec la même commande.

pod install --repo-update

Dans mon cas cela a fonctionné ! 🎉

Conclusion

Vérifier bien que Flipper fonctionne bien sur les deux plateformes (Android et iOS) avant de déployer vos modifications. J’espère que ce tutoriel vous aura aidé, bonne journée à vous !