[Conclusion] Mise en place d’une librairie en React Native ✅

Pour conclure cette série d’articles, reprenons les objectifs et les différentes solutions apportées.

L’objectif principal est le développement d’une librairie de composants React Native, dans le but de mutualiser des composants de deux applications : PayZen et Lyra Collect.

La difficulté principale étant que certains composants peuvent être de haut niveau, quasiment des écrans entiers. C’est-à-dire qu’ils embarquent de la logique métier : des appels serveurs, de la navigation entre plusieurs écrans, des paramètres utilisateurs etc.

Reprenons les principales problématiques ainsi que les solutions apportées :

Gestion des dépendances dans le contexte React Native / Expo

• L’utilisation des peerDependencies permet de mutualiser les dépendances
• On a pu démontrer une configuration qui fonctionne avec le bundler Metro (au niveau du code source et des assets)
• La librairie est écrite en TypeScript et tout le typage est bien exporté
• La compilation de la librairie est simple et rapide

L’environnement de développement, l’intégration continue et le déploiement

• Bonne expérience de développement, tout l’outillage fonctionne comme avant (refresh de composant à chaud, debugger, inspecteur d’éléments etc.)
• Le développeur continue de tester son application, qu’il travail sur la librairie ou sur son application
• Linking de la librairie en local très facile
• Intégration continue et déploiement avec Bitrise

Gestion des personnalisations : le thème, l’internationalisation et les paramètres utilisateur

• Passage de paramètres et création d’un contexte grâce à un composant Provider
• Possibilité de personnaliser le thème, les traductions et la configuration de la librairie
• Les paramètres des composants de la lib peuvent être intégré dans l’écran des préférences de l’application

Gestion des appels serveur et de l’authentification

• Utilisation d’un client HTTP (Axios) qui permet d’embarquer la configuration des appels serveurs (URL de base, authentification etc.)
• La librairie est capable d’effectuer des appels serveurs avec des urls relatives
• La gestion des tokens d’authentification et de l’URL du back-end restent de la responsabilité des applications, la librairie ne s’en occupe pas
• Le déploiement de la brique “API Proxy” côté Lyra Collect permet d’accéder aux API de PayZen depuis l’app Lyra Collect
• Les appels REST sont validés par les specs OpenAPI fournies par le back-end

Les grands principes à retenir

• Librairie écrite en TypeScript
• Elle expose un composant Provider qui lui permet d’accepter des paramètres et d’initialiser les librairies utilitaires
  • React Native Paper pour le thème
  • I18n-js pour l’internationalisation
  • Axios pour les appels HTTP