react-native-graph

react-native-graph es un componente de código abierto para React Native destinado a dibujar gráficos de líneas. El README lo describe como una implementación basada en Skia creada en Margelo y utilizada en la aplicación Pink Panda Wallet para renderizar múltiples gráficos de tokens. Su enfoque documentado es la creación de gráficos móviles fluidos: el README menciona el renderizado de curvas de Bézier cúbicas, interpolación de rutas nativas en Skia, animaciones (de hasta 120 FPS según el README), un gesto de desplazamiento (pan/scrubbing) y compatibilidad con historiales de precios al estilo de billeteras de criptomonedas. El paquete exporta un componente LineGraph. Sus props obligatorias son points (un array de objetos GraphPoint con un valor numérico y una Date) y color. Acepta ViewProps de React Native en la vista raíz. Un booleano animado permite alternar entre el renderizador animado y un renderizador estático ligero, el cual el README sugiere para mostrar muchos gráficos en una lista. La prop opcional range puede anular el eje x, el eje y, o ambos; de lo contrario, los ejes se infieren de los puntos. El modo animado desbloquea más funciones. gradientFillColors añade un relleno degradado vertical debajo de la línea. lineThickness controla el ancho del trazo. enablePanGesture habilita la interacción de presionar y desplazar, con los callbacks onGestureStart, onPointSelected y onGestureEnd; panGestureDelay controla cuánto tiempo debe mantenerse presionada la pantalla antes de que comience el desplazamiento. SelectionDot renderiza la posición del desplazamiento y puede ser reemplazado o ocultado con null. horizontalPadding y verticalPadding ajustan el espacio de dibujo. enableIndicator e indicatorPulsating muestran un indicador en el último punto. TopAxisLabel y BottomAxisLabel renderizan elementos de React personalizados arriba y abajo del gráfico. enableFadeInMask hace que el inicio de la línea aparezca gradualmente. Algunas props están documentadas como exclusivas del modo animado, incluyendo el gesto de desplazamiento, las etiquetas, el indicador, el relleno degradado y SelectionDot. El README señala que selectionDotShadowColor no se utiliza actualmente y no tiene efecto visual. El README documenta dos backends de renderizado. Skia es el predeterminado. Se puede seleccionar un backend alternativo de lienzo GPU, react-native-tgfx, en el momento de la compilación con EXPO_PUBLIC_RN_GRAPH_BACKEND=tgfx (o RN_GRAPH_BACKEND en React Native puro con un plugin de Babel inline-environment-variables). Solo es necesario instalar un renderizador; Metro trata a ambos como opcionales y, si se solicita tgfx pero no está instalado, el gráfico advierte una vez y vuelve a Skia. Un SelectionDot personalizado debe importar formas del renderizador activo. El paquete exporta GRAPH_BACKEND para verificar a qué renderizador resolvió una compilación ('skia' o 'tgfx'). La instalación requiere react-native-reanimated, react-native-gesture-handler y @shopify/react-native-skia para el backend predeterminado, además de react-native-graph. El README incluye un ejemplo de uso de LineGraph con un hook usePriceHistory y ejemplos de props para animación, gestos de desplazamiento, rango y un SelectionDot personalizado. También enlaza a un ejemplo de SelectionDot personalizado en el repositorio. El proyecto está patrocinado por Pink Panda y cuenta con un Discord de la comunidad de Margelo. El README agradece a William Candillon y Christian Falch por su ayuda con React Native Skia.