프로젝트 소개

react-native-graph는 선 그래프를 그리기 위한 오픈 소스 React Native 컴포넌트입니다. README에 따르면 이 컴포넌트는 Margelo에서 제작되었으며, Pink Panda Wallet 앱에서 수많은 토큰 그래프를 렌더링하는 데 사용되는 Skia 기반 구현체입니다. 주요 목표는 부드러운 모바일 차트 구현이며, 3차 베지에 곡선 렌더링, Skia의 네이티브 경로 보간, 최대 120 FPS의 애니메이션, 팬/스크러빙 제스처, 암호화폐 지갑 스타일의 가격 기록 호환성 등을 지원합니다. 이 패키지는 LineGraph 컴포넌트를 내보냅니다. 필수 prop으로는 points(숫자 값과 Date를 포함하는 GraphPoint 객체 배열)와 color가 있습니다. 루트 뷰에는 React Native ViewProps를 적용할 수 있습니다. animated 불리언 값에 따라 애니메이션 렌더러와 가벼운 정적 렌더러 사이를 전환할 수 있으며, README에서는 리스트에서 많은 그래프를 보여줄 때 정적 렌더러 사용을 권장합니다. 선택적 prop인 range를 통해 x축, y축 또는 둘 모두를 오버라이드할 수 있으며, 설정하지 않을 경우 points에서 축을 추론합니다. 애니메이션 모드에서는 더 많은 기능을 사용할 수 있습니다. gradientFillColors는 선 아래에 수직 그라데이션 채우기를 추가하며, lineThickness는 선 두께를 조절합니다. enablePanGesture를 통해 누르고 훑는(press-and-scrub) 상호작용을 활성화할 수 있으며, onGestureStart, onPointSelected, onGestureEnd 콜백을 제공합니다. panGestureDelay는 스크러빙이 시작되기 전까지 눌러야 하는 시간을 제어합니다. SelectionDot은 스크러빙 위치를 렌더링하며, 이를 다른 컴포넌트로 교체하거나 null로 설정해 숨길 수 있습니다. horizontalPadding과 verticalPadding으로 그리기 공간을 조정하며, enableIndicator와 indicatorPulsating은 마지막 지점에 표시기를 보여줍니다. TopAxisLabel과 BottomAxisLabel은 그래프 상단과 하단에 사용자 정의 React 요소를 렌더링합니다. enableFadeInMask는 선의 시작 부분을 페이드인 처리합니다. 팬 제스처, 레이블, 표시기, 그라데이션 채우기, SelectionDot 등의 일부 prop은 애니메이션 모드에서만 작동합니다. README에서는 selectionDotShadowColor가 현재 사용되지 않으며 시각적 효과가 없다고 명시하고 있습니다. README는 두 가지 렌더러 백엔드를 설명합니다. 기본값은 Skia입니다. 대안으로 GPU 캔버스 백엔드인 react-native-tgfx를 빌드 시점에 EXPO_PUBLIC_RN_GRAPH_BACKEND=tgfx(또는 Babel inline-environment-variables 플러그인을 사용하는 순수 React Native의 경우 RN_GRAPH_BACKEND)로 선택할 수 있습니다. 하나의 렌더러만 설치하면 되며, Metro는 두 가지를 모두 선택 사항으로 처리합니다. tgfx가 요청되었으나 설치되지 않은 경우 그래프는 한 번 경고를 표시하고 Skia로 폴백합니다. 사용자 정의 SelectionDot은 활성 렌더러에서 shape를 임포트해야 합니다. 패키지는 빌드 시 어떤 렌더러가 결정되었는지('skia' 또는 'tgfx') 확인할 수 있도록 GRAPH_BACKEND를 내보냅니다. 설치하려면 react-native-reanimated, react-native-gesture-handler, 기본 백엔드용 @shopify/react-native-skia, 그리고 react-native-graph가 필요합니다. README에는 usePriceHistory 훅을 사용한 LineGraph 사용 예시와 애니메이션, 팬 제스처, 범위, 사용자 정의 SelectionDot에 대한 prop 예시가 포함되어 있습니다. 또한 저장소 내의 사용자 정의 SelectionDot 예시 링크도 제공합니다. 이 프로젝트는 Pink Panda의 후원을 받으며 Margelo 커뮤니티 Discord를 운영하고 있습니다. README는 React Native Skia 작업에 도움을 준 William Candillon과 Christian Falch에게 감사를 표하고 있습니다.