react-native-graph

react-native-graph est un composant React Native open-source pour dessiner des graphiques linéaires. Le README le décrit comme une implémentation basée sur Skia créée chez Margelo et utilisée dans l'application Pink Panda Wallet pour rendre de nombreux graphiques de jetons. Son objectif documenté est la création de graphiques mobiles fluides : le README mentionne le rendu de courbes de Bézier cubiques, l'interpolation de chemins native dans Skia, des animations (jusqu'à 120 FPS selon le README), un geste de panoramique/scrubbing et une compatibilité avec les historiques de prix de type portefeuille crypto. Le package exporte un composant LineGraph. Ses props requises sont points (un tableau d'objets GraphPoint avec une valeur numérique et une Date) et color. Il accepte les ViewProps de React Native sur la vue racine. Un booléen animé permet de basculer entre le rendu animé et un rendu statique léger, que le README suggère pour l'affichage de nombreux graphiques dans une liste. La prop optionnelle range peut remplacer l'axe x, l'axe y, ou les deux ; sinon, les axes sont déduits des points. Le mode animé débloque plus de fonctionnalités. gradientFillColors ajoute un remplissage dégradé vertical sous la ligne. lineThickness contrôle la largeur du trait. enablePanGesture active l'interaction press-and-scrub, avec les callbacks onGestureStart, onPointSelected et onGestureEnd ; panGestureDelay contrôle la durée pendant laquelle une pression doit être maintenue avant que le scrubbing ne commence. SelectionDot rend la position du scrub et peut être remplacé ou masqué avec null. horizontalPadding et verticalPadding ajustent l'espace de dessin. enableIndicator et indicatorPulsating affichent un indicateur au dernier point. TopAxisLabel et BottomAxisLabel rendent des éléments React personnalisés au-dessus et en dessous du graphique. enableFadeInMask crée un fondu à l'entrée au début de la ligne. Certaines props sont documentées comme étant réservées au mode animé, notamment le geste de panoramique, les labels, l'indicateur, le remplissage dégradé et SelectionDot. Le README note que selectionDotShadowColor est actuellement inutilisé et n'a aucun effet visuel. Le README documente deux backends de rendu. Skia est le backend par défaut. Un backend alternatif de canevas GPU, react-native-tgfx, peut être sélectionné au moment du build avec EXPO_PUBLIC_RN_GRAPH_BACKEND=tgfx (ou RN_GRAPH_BACKEND sur React Native pur avec un plugin Babel inline-environment-variables). Un seul rendu doit être installé ; Metro traite les deux comme optionnels, et si tgfx est demandé mais non installé, le graphique affiche un avertissement une fois et revient à Skia. Un SelectionDot personnalisé doit importer des formes depuis le rendu actif. Le package exporte GRAPH_BACKEND pour vérifier quel rendu a été résolu lors du build ('skia' ou 'tgfx'). L'installation nécessite react-native-reanimated, react-native-gesture-handler et @shopify/react-native-skia pour le backend par défaut, en plus de react-native-graph lui-même. Le README inclut un exemple d'utilisation de LineGraph avec un hook usePriceHistory et des exemples de props pour l'animation, les gestes de panoramique, la plage et un SelectionDot personnalisé. Il renvoie également vers un exemple de SelectionDot personnalisé dans le dépôt. Le projet est sponsorisé par Pink Panda et dispose d'un Discord communautaire Margelo. Le README remercie William Candillon et Christian Falch pour leur aide avec React Native Skia.