GSTJ/react-native-magic-modal : ce que le README permet réellement de vérifier
Une bibliothèque modale appelable impérativement depuis n'importe où. Contrôlez sans effort les modaux, rationalisez les flux complexes et créez une expérience utilisateur fiable.
En bref
- De quoi s’agit-il ?
- Analyse en français de GSTJ/react-native-magic-modal, de son périmètre documenté, de ses commandes et de ses limites pratiques.
- À qui s’adresse-t-il ?
- Avec `react-native-magic-modal`, le contrôle décisif est l’installation adaptée à React Native et à la plateforme ciblée, puis le montage du portail avant l’appel asynchrone. Il faut ouvrir une modale, attendre sa valeur de retour et fermer avec chacune des raisons documentées.
- Puis-je l’utiliser commercialement ?
- Oui. MIT est une licence permissive : vous pouvez utiliser, modifier et vendre un logiciel qui en dépend, à condition de conserver les mentions de droit d’auteur et de licence.
- Est-il encore maintenu ?
- Oui. Les derniers commits datent d’il y a 1 jour.
- En quel langage est-il écrit ?
- Principalement TypeScript, d’après les statistiques de langage de GitHub.
Ces réponses reposent sur les données GitHub du projet (dernière synchronisation le 14 septembre 2026) et sur notre analyse. Elles ne constituent pas un avis juridique.
ANALYSE OPEN SOURCE APPROFONDIE
Attendre une modale depuis n'importe quel flux asynchrone
Magic Modal est une bibliothèque TypeScript qui fait qu'un dialogue modal se comporte comme une promesse attendable. Vous montez un portail, appelez magicModal.show() avec un composant et une configuration, et le handle retourné se résout lorsque la modale se ferme. La résolution contient soit les données soumises par votre modale, soit la raison de sa fermeture. Le README décrit cela comme un moyen d'ouvrir une modale depuis n'importe quel flux asynchrone sur Expo, React Native ou le web, avec le même contrat de résultat typé sur les trois.
Avec `react-native-magic-modal`, le contrôle décisif est l’installation adaptée à React Native et à la plateforme ciblée, puis le montage du portail avant l’appel asynchrone. Il faut ouvrir une modale, attendre sa valeur de retour et fermer avec chacune des raisons documentées. Le test doit aussi couvrir un composant démonté et une navigation interrompue, puisque la bibliothèque conserve une pile de modales au niveau du portail. Cette lecture reste attachée à GSTJ/react-native-magic-modal et aux éléments nommés dans sa section 1, plutôt qu’à une recommandation générale.
Le portail possède la pile de modales
L'architecture de la bibliothèque est centrée sur MagicModalPortal, qui possède la pile de modales. Chaque appel à magicModal.show() pousse une nouvelle entrée sur cette pile et retourne un handle attendable. Le handle est lui-même la promesse, et il porte également le modalID de cette entrée, une fonction update et une fonction hide. Le README note que l'alias promise sur le handle est déprécié, donc vous pouvez toujours écrire const { promise } = magicModal.show(...) mais le handle lui-même est la promesse. Étant donné que chaque entrée de pile conserve son propre composant, sa configuration, son ID et sa promesse, un deuxième appel show() peut s'ouvrir au-dessus de la modale actuelle sans mélanger leurs résultats.
Avec `react-native-magic-modal`, le contrôle décisif est l’installation adaptée à React Native et à la plateforme ciblée, puis le montage du portail avant l’appel asynchrone. Il faut ouvrir une modale, attendre sa valeur de retour et fermer avec chacune des raisons documentées. Le test doit aussi couvrir un composant démonté et une navigation interrompue, puisque la bibliothèque conserve une pile de modales au niveau du portail. Dans le cas de GSTJ/react-native-magic-modal, cette précision borne la portée de la section 2 et évite de confondre une capacité décrite avec un résultat garanti.
L'installation dépend de la plateforme
Les commandes d'installation diffèrent car le package fournit des entrées séparées pour les environnements natifs et navigateur. Pour Expo Web, le README liste pnpm add magic-modal suivi de npx expo install react-native-gesture-handler react-native-reanimated react-native-worklets react-dom react-native-web @expo/metro-runtime. Expo iOS et Android utilisent la même première commande mais remplacent les dépendances web par react-native-screens. Pour une application React uniquement navigateur comme Next.js, l'installation complète est simplement pnpm add magic-modal ; l'entrée web ne contient aucune dépendance React Native, donc aucun alias de bundler ni pair de gestes ou d'animations n'est nécessaire. Le README oriente également les utilisateurs React Native purs vers un guide d'installation séparé.
Avec `react-native-magic-modal`, le contrôle décisif est l’installation adaptée à React Native et à la plateforme ciblée, puis le montage du portail avant l’appel asynchrone. Il faut ouvrir une modale, attendre sa valeur de retour et fermer avec chacune des raisons documentées. Le test doit aussi couvrir un composant démonté et une navigation interrompue, puisque la bibliothèque conserve une pile de modales au niveau du portail. Cette lecture reste attachée à GSTJ/react-native-magic-modal et aux éléments nommés dans sa section 3, plutôt qu’à une recommandation générale.
Monter le portail selon l'environnement
Sur Expo et React Native natif, vous montez MagicModalPortal à l'intérieur d'un GestureHandlerRootView, comme dans l'exemple du README. Le portail est placé à côté du contenu de votre application. Pour Expo Router, la même structure va dans le fichier racine app/_layout.tsx. Pour les applications navigateur, vous montez le portail dans un Client Component et rien d'autre ; il n'y a pas de GestureHandlerRootView car le bundle navigateur ne contient pas Gesture Handler. Le README renvoie à un guide Next.js pour le shell exact et à un exemple consommateur App Router dans examples/next-web.
Avec `react-native-magic-modal`, le contrôle décisif est l’installation adaptée à React Native et à la plateforme ciblée, puis le montage du portail avant l’appel asynchrone. Il faut ouvrir une modale, attendre sa valeur de retour et fermer avec chacune des raisons documentées. Le test doit aussi couvrir un composant démonté et une navigation interrompue, puisque la bibliothèque conserve une pile de modales au niveau du portail. Dans le cas de GSTJ/react-native-magic-modal, cette précision borne la portée de la section 4 et évite de confondre une capacité décrite avec un résultat garanti.
Résultats typés et raisons de fermeture
L'API est générique sur les données que vous attendez. Vous utilisez show<T>() pour ouvrir une modale et useMagicModal<T>() dans le contenu de la modale pour appeler hide(data). La promesse se résout en un HideReturn<T> qui inclut la raison et, lorsque la raison est MagicModalHideReason.INTENTIONAL_HIDE, les données. Les autres raisons couvrent les pressions sur l'arrière-plan, les balayages terminés, la fermeture système comme le retour Android ou la touche Échap du web, et hideAll(). TypeScript affine le résultat afin que data ne soit disponible qu'après avoir vérifié la raison. Le README donne un exemple de modale de confirmation où l'appelant attend un résultat de type booléen et agit en conséquence, et note que l'entrée navigateur rend des éléments DOM au lieu de composants React Native mais utilise le même contrat de résultat.
Avec `react-native-magic-modal`, le contrôle décisif est l’installation adaptée à React Native et à la plateforme ciblée, puis le montage du portail avant l’appel asynchrone. Il faut ouvrir une modale, attendre sa valeur de retour et fermer avec chacune des raisons documentées. Le test doit aussi couvrir un composant démonté et une navigation interrompue, puisque la bibliothèque conserve une pile de modales au niveau du portail. Cette lecture reste attachée à GSTJ/react-native-magic-modal et aux éléments nommés dans sa section 5, plutôt qu’à une recommandation générale.
Ce que la FAQ clarifie
La FAQ répond à quelques questions courantes. Plusieurs modales peuvent être ouvertes car chaque appel show() crée une entrée indépendante. Une modale peut contenir une ScrollView, mais vous devez désactiver la fermeture par balayage en passant swipeDirection: undefined ; la bibliothèque n'implémente pas de points d'ancrage ni de défilement imbriqué. Pour fermer une modale depuis l'extérieur de son composant, conservez le modalID retourné par show() et appelez magicModal.hide(undefined, { modalID }). Sur iOS, pour rendre sous un sélecteur natif, vous pouvez temporairement appeler magicModal.disableFullWindowOverlay() et le restaurer dans un bloc finally. Le README fournit également un lien vers une liste de contributeurs et un guide de contribution.
Avec `react-native-magic-modal`, le contrôle décisif est l’installation adaptée à React Native et à la plateforme ciblée, puis le montage du portail avant l’appel asynchrone. Il faut ouvrir une modale, attendre sa valeur de retour et fermer avec chacune des raisons documentées. Le test doit aussi couvrir un composant démonté et une navigation interrompue, puisque la bibliothèque conserve une pile de modales au niveau du portail. Dans le cas de GSTJ/react-native-magic-modal, cette précision borne la portée de la section 6 et évite de confondre une capacité décrite avec un résultat garanti.
Licence et contributions
Magic Modal est publié sous la licence MIT, avec les droits d'auteur détenus par Gabriel Taveira (2023). La licence permet l'utilisation, la copie, la modification, la fusion, la publication, la distribution, la sous-licence et la vente de copies, à condition que l'avis de droit d'auteur soit inclus. Le logiciel est fourni 'tel quel', sans garantie d'aucune sorte, et la licence ne traite pas du support, des garanties de sécurité ou de la préparation à la production. Le README fournit un lien vers une liste de contributeurs et un guide de contribution, et les métadonnées du dépôt montrent un nombre de problèmes ouverts, mais le README ne spécifie pas de cadence de publication ni de politique de maintenance.
Avec `react-native-magic-modal`, le contrôle décisif est l’installation adaptée à React Native et à la plateforme ciblée, puis le montage du portail avant l’appel asynchrone. Il faut ouvrir une modale, attendre sa valeur de retour et fermer avec chacune des raisons documentées. Le test doit aussi couvrir un composant démonté et une navigation interrompue, puisque la bibliothèque conserve une pile de modales au niveau du portail. Cette lecture reste attachée à GSTJ/react-native-magic-modal et aux éléments nommés dans sa section 7, plutôt qu’à une recommandation générale.
Conclusion éditoriale
Avec `react-native-magic-modal`, le contrôle décisif est l’installation adaptée à React Native et à la plateforme ciblée, puis le montage du portail avant l’appel asynchrone. Il faut ouvrir une modale, attendre sa valeur de retour et fermer avec chacune des raisons documentées. Le test doit aussi couvrir un composant démonté et une navigation interrompue, puisque la bibliothèque conserve une pile de modales au niveau du portail. Pour décider de l’adopter, vérifiez précisément ce parcours avec la version et l’environnement indiqués par GSTJ/react-native-magic-modal; cette conclusion ne transforme pas les déclarations du README en garantie indépendante.
Notes de la communauté