Aller au contenu
useffect.sh
Planifier 30 min avec un senior
Tous les articles
La veille du collectif

Nano Icons, PDF natif et imports directs : trois frontières du runtime

2 min de lectureReact Native · Expo

Nano Icons 1.0 rapproche les SVG des composants natifs

Nano Icons 1.0 (nouvelle fenêtre) ajoute un plugin Metro withNanoIcons pour recharger les SVG pendant le développement. Les SVG peuvent aussi devenir des SF Symbols sur iOS et des VectorDrawables sur Android, utilisables via nativeNanoSymbol dans les onglets natifs avec React Navigation 8 et Screens 4.29 ou plus. Cette utilisation vise donc une combinaison de versions précise, dont Navigation 8 encore en alpha.

La mise à jour demande RN 0.81 ou plus, une régénération des fonts et un rebuild natif. Le hot reload améliore les itérations suivantes ; il ne supprime pas cette étape initiale. Les props natives size et color permettent aussi l’animation avec Reanimated.

Pour un design system, l’intérêt est de conserver une source SVG tout en respectant le support attendu par chaque composant système. Le rendu d’une icône dans du texte et son emploi dans une tab bar ne suivent pas forcément le même chemin.

Better PDF garde le scroll et le zoom hors du chemin JavaScript

react-native-better-pdf (nouvelle fenêtre) est un lecteur virtualisé basé sur Nitro Views et la New Architecture. Il utilise PDFKit sur iOS et PdfRenderer sur Android ; son README décrit un scroll, un zoom et un rendu gérés nativement, JavaScript servant à la configuration et aux événements stabilisés.

C’est une architecture intéressante pour les longs documents. La virtualisation limite les pages et les pixels conservés autour de la zone visible. La comparaison utile porte aussi sur la recherche, les annotations et les fichiers protégés dont le produit dépend : deux lecteurs rapides peuvent avoir des périmètres fonctionnels différents.

Aucun temps d’ouverture d’un document de démonstration ne garantit celui des PDF de l’application. Un scan haute résolution et un document essentiellement vectoriel ne coûtent pas la même chose à décoder.

Imports directs : un gain potentiel lié aux internes de RN

babel-plugin-react-native-direct-imports (nouvelle fenêtre) réécrit les imports depuis le point d’entrée RN en require directs de modules internes. Le projet se dit encore précoce et maintient des correspondances par version exacte de React Native. Cette stratégie peut réduire ce qu’un petit bundle embarque, mais elle dépend de chemins privés et demande de suivre les upgrades du core.

L’optimisation mérite donc une mesure sur le bundle de production réel. Une micro-application important une seule API n’exerce pas le même graphe qu’une app avec navigation, médias et nombreuses bibliothèques. Le gain doit aussi rester compatible avec les transformations du projet ; le README signale notamment des contraintes avec les anciennes versions du bundle mode de Worklets.

Un de ces sujets se pose dans votre app ? Un senior du collectif peut en parler avec vous.