Об этом проекте

react-native-graph — это open-source компонент React Native для отрисовки линейных графиков. Согласно README, это реализация на базе Skia, созданная в Margelo и используемая в приложении Pink Panda Wallet для отображения множества графиков токенов. Основное внимание уделено плавности работы на мобильных устройствах: в README указаны кубические кривые Безье, нативная интерполяция путей в Skia, анимации (до 120 FPS), жест панорамирования/прокрутки (scrubbing) и совместимость с историями цен в стиле криптокошельков. Пакет экспортирует компонент LineGraph. Обязательными пропсами являются points (массив объектов GraphPoint с числовым значением и датой) и color. Он принимает ViewProps из React Native для корневого представления. Анимированный boolean переключает между анимированным рендерером и облегченным статическим рендерером, который, по мнению авторов, рекомендуется для отображения множества графиков в списке. Опциональный пропс range может переопределять ось X, ось Y или обе сразу; в противном случае оси выводятся на основе точек. Анимированный режим открывает дополнительные возможности. gradientFillColors добавляет вертикальный градиент под линией. lineThickness управляет шириной обводки. enablePanGesture активирует взаимодействие «нажми и прокрути» с колбэками onGestureStart, onPointSelected и onGestureEnd; panGestureDelay определяет время удержания перед началом прокрутки. SelectionDot отрисовывает позицию прокрутки и может быть заменен или скрыт с помощью null. horizontalPadding и verticalPadding настраивают пространство для рисования. enableIndicator и indicatorPulsating отображают индикатор в последней точке. TopAxisLabel и BottomAxisLabel отрисовывают пользовательские React-элементы над и под графиком. enableFadeInMask создает эффект постепенного появления начала линии. Некоторые пропсы доступны только в анимированном режиме, включая жесты прокрутки, метки, индикатор, градиентную заливку и SelectionDot. В README отмечено, что selectionDotShadowColor в данный момент не используется и не имеет визуального эффекта. В README описаны два бэкенда рендеринга. Skia является основным. Альтернативный бэкенд GPU canvas, react-native-tgfx, можно выбрать при сборке с помощью EXPO_PUBLIC_RN_GRAPH_BACKEND=tgfx (или RN_GRAPH_BACKEND в bare React Native с плагином Babel inline-environment-variables). Достаточно установить только один рендерер; Metro считает оба опциональными, и если tgfx запрошен, но не установлен, график выдаст предупреждение один раз и откатится к Skia. Пользовательский SelectionDot должен импортировать фигуры из активного рендерера. Пакет экспортирует GRAPH_BACKEND для проверки того, какой рендерер был выбран при сборке ('skia' или 'tgfx'). Для установки требуются react-native-reanimated, react-native-gesture-handler и @shopify/react-native-skia для основного бэкенда, а также сам react-native-graph. README содержит пример использования LineGraph с хуком usePriceHistory и примеры пропсов для анимации, жестов прокрутки, диапазона и пользовательского SelectionDot. Также приведена ссылка на пример SelectionDot в репозитории. Проект спонсируется Pink Panda и имеет Discord-сообщество Margelo. В README выражается благодарность William Candillon и Christian Falch за помощь с React Native Skia.