margelo/react-native-graph

Что это?

Ключевые возможности

• 01Линейные графики на Skia с кривыми Безье для более плавных линий.
• 02Анимированные переходы между наборами данных с выполнением в UI-потоке.
• 03Жест нажатия с удержанием и перемещения для прокрутки по точкам с колбэками выбора.
• 04Вариант статического рендерера для экономного отображения множества графиков в списке.
• 05Настраиваемые маркер выбранной точки, индикатор конечной точки и метки осей сверху и снизу.
• 06Необязательные фиксированные диапазоны по осям X и Y для отображения заданного временного промежутка или шкалы значений.

Сценарии использования

• Отображение истории цен токенов или активов в криптокошельке или торговом приложении.
• Показ графиков динамики акций или портфеля в приложении на React Native.
• Отрисовка множества небольших графиков-спарклайнов в прокручиваемом списке.
• Добавление интерактивной прокрутки цен, при которой метка обновляется, пока пользователь перемещает палец по графику.

Быстрый старт

1. 1

   Установите peer-зависимости Reanimated, Gesture Handler и Skia

   yarn add react-native-reanimated
2. 2

   Установите сам react-native-graph

   yarn add react-native-graph
3. 3

   Отобразите компонент LineGraph, передав ему массив GraphPoint и prop color

Что важно знать

• !Для работы необходимо также установить Reanimated, Gesture Handler и Skia.
• !Жест панорамирования, подписи, точка выделения и градиентная заливка работают только при значении true у animated.
• !График не загружает данные — точки нужно передать самостоятельно.
• !Категориальные строковые значения на оси x не поддерживаются.

Темы

Частые вопросы

Что такое react-native-graph?

Компонент линейных графиков и диаграмм для React Native на базе Skia: анимация, кривые Безье и прокрутка данных касанием. react-native-graph — компонент линейных графиков для React Native, который использует движок 2D-графики Skia. Он рисует плавные кривые Безье и поддерживает анимированные переходы между наборами данных с частотой до 120 FPS благодаря выполнению анимаций в UI-потоке.

react-native-graph можно использовать бесплатно? Какая у него лицензия?

react-native-graph распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

react-native-graph всё ещё поддерживается?

Активно поддерживается. Последний коммит в react-native-graph — 13 окт. 2026 г..

Для чего можно использовать react-native-graph?

Отображение истории цен токенов или активов в криптокошельке или торговом приложении. Показ графиков динамики акций или портфеля в приложении на React Native. Отрисовка множества небольших графиков-спарклайнов в прокручиваемом списке. Добавление интерактивной прокрутки цен, при которой метка обновляется, пока пользователь перемещает палец по графику.

Как установить react-native-graph?

Установите peer-зависимости Reanimated, Gesture Handler и Skia: yarn add react-native-reanimated Установите сам react-native-graph: yarn add react-native-graph Отобразите компонент LineGraph, передав ему массив GraphPoint и prop color

Где скачать react-native-graph?

Исходный код и инструкции по установке — на GitHub: https://github.com/margelo/react-native-graph