margelo/react-native-graph

O que é?

Recursos principais

• 01Gráficos de linhas renderizados com Skia, usando curvas cúbicas de Bézier para suavizar as bordas.
• 02Transições animadas entre conjuntos de dados, executadas na thread da UI.
• 03Gesto de arrastar com toque longo para percorrer os pontos, com callbacks de seleção.
• 04Opção de renderizador estático para exibir vários gráficos em uma lista com baixo custo.
• 05Ponto de seleção, indicador do ponto final e rótulos dos eixos superior e inferior personalizáveis.
• 06Intervalos fixos opcionais para os eixos x e y, para mostrar um período ou uma escala de valores específicos.

Casos de uso

• Exibir o histórico de preços de tokens ou ativos em uma carteira de cripto ou app de trading.
• Mostrar gráficos de desempenho de ações ou carteiras de investimentos em um app React Native.
• Renderizar vários gráficos pequenos no estilo sparkline em uma lista rolável.
• Adicionar navegação interativa pelos preços, atualizando um rótulo enquanto a pessoa arrasta o dedo pelo gráfico.

Início rápido

1. 1

   Instale as dependências peer Reanimated, Gesture Handler e Skia

   yarn add react-native-reanimated
2. 2

   Instale o próprio react-native-graph

   yarn add react-native-graph
3. 3

   Renderize um componente LineGraph com seu array de GraphPoint e uma prop color

Antes de usar

• !Requer que Reanimated, Gesture Handler e Skia também estejam instalados.
• !O gesto de arrastar, os rótulos, o ponto de seleção e o preenchimento com gradiente só funcionam quando animated está definido como true.
• !O gráfico não busca os dados; você precisa fornecer os pontos por conta própria.
• !Valores de string categóricos não são compatíveis com o eixo x.

Tópicos

Perguntas frequentes

O que é react-native-graph?

Componente de gráficos de linhas para React Native com Skia, animações, curvas cúbicas de Bézier e navegação pelos pontos por gesto de toque. react-native-graph é um componente de gráficos de linhas para React Native, renderizado com o mecanismo gráfico 2D Skia. Ele desenha curvas cúbicas de Bézier suaves e oferece transições animadas entre conjuntos de dados, com animações executadas na thread da UI a até 120 FPS.

react-native-graph é gratuito? Qual é a licença?

react-native-graph é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.

react-native-graph ainda é mantido?

Manutenção ativa. O último commit de react-native-graph foi em 13 de out. de 2026.

Para que posso usar react-native-graph?

Exibir o histórico de preços de tokens ou ativos em uma carteira de cripto ou app de trading. Mostrar gráficos de desempenho de ações ou carteiras de investimentos em um app React Native. Renderizar vários gráficos pequenos no estilo sparkline em uma lista rolável. Adicionar navegação interativa pelos preços, atualizando um rótulo enquanto a pessoa arrasta o dedo pelo gráfico.

Como instalar react-native-graph?

Instale as dependências peer Reanimated, Gesture Handler e Skia: yarn add react-native-reanimated Instale o próprio react-native-graph: yarn add react-native-graph Renderize um componente LineGraph com seu array de GraphPoint e uma prop color

Onde consigo react-native-graph?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/margelo/react-native-graph