react-native-graph

react-native-graph é um componente de código aberto para React Native destinado ao desenho de gráficos de linha. O README o descreve como uma implementação baseada em Skia criada na Margelo e utilizada no app Pink Panda Wallet para renderizar diversos gráficos de tokens. Seu foco documentado é a criação de gráficos móveis suaves: o README lista renderização de bezier cúbica, interpolação de caminho nativa no Skia, animações (até 120 FPS, segundo o README), um gesto de pan/scrubbing e compatibilidade com históricos de preços no estilo de carteiras de criptomoedas. O pacote exporta um componente LineGraph. Seus props obrigatórios são points (um array de objetos GraphPoint com um valor numérico e uma Date) e color. Ele aceita ViewProps do React Native na view raiz. Um booleano animado alterna entre o renderizador animado e um renderizador estático leve, que o README sugere para a exibição de muitos gráficos em uma lista. O prop opcional range pode sobrescrever o eixo x, o eixo y, ou ambos; caso contrário, os eixos são inferidos a partir dos pontos. O modo animado desbloqueia mais recursos. gradientFillColors adiciona um preenchimento de gradiente vertical abaixo da linha. lineThickness controla a largura do traço. enablePanGesture habilita a interação de pressionar e deslizar (scrub), com callbacks onGestureStart, onPointSelected e onGestureEnd; panGestureDelay controla por quanto tempo um toque deve ser mantido antes que o scrubbing comece. SelectionDot renderiza a posição do scrub e pode ser substituído ou ocultado com null. horizontalPadding e verticalPadding ajustam o espaço de desenho. enableIndicator e indicatorPulsating mostram um indicador no último ponto. TopAxisLabel e BottomAxisLabel renderizam elementos React personalizados acima e abaixo do gráfico. enableFadeInMask faz com que o início da linha apareça gradualmente. Alguns props são documentados como exclusivos do modo animado, incluindo o gesto de pan, labels, indicador, preenchimento de gradiente e SelectionDot. O README observa que selectionDotShadowColor não é utilizado no momento e não possui efeito visual. O README documenta dois backends de renderização. Skia é o padrão. Um backend alternativo de canvas GPU, react-native-tgfx, pode ser selecionado no momento do build com EXPO_PUBLIC_RN_GRAPH_BACKEND=tgfx (ou RN_GRAPH_BACKEND no React Native puro com um plugin de variáveis de ambiente inline do Babel). Apenas um renderizador precisa ser instalado; o Metro trata ambos como opcionais e, se o tgfx for solicitado mas não estiver instalado, o gráfico emitirá um aviso único e retornará ao Skia. Um SelectionDot personalizado deve importar formas do renderizador ativo. O pacote exporta GRAPH_BACKEND para verificar qual renderizador o build resolveu ('skia' ou 'tgfx'). A instalação requer react-native-reanimated, react-native-gesture-handler e @shopify/react-native-skia para o backend padrão, além do próprio react-native-graph. O README inclui um exemplo de uso do LineGraph com um hook usePriceHistory e exemplos de props para animação, gestos de pan, range e SelectionDot personalizado. Também linka para um exemplo de SelectionDot personalizado no repositório. O projeto é patrocinado pela Pink Panda e possui um Discord da comunidade Margelo. O README agradece a William Candillon e Christian Falch pela ajuda com o React Native Skia.