このプロジェクトについて

react-native-graphは、ライングラフを描画するためのオープンソースのReact Nativeコンポーネントです。READMEによると、これはMargeloで作成されたSkiaベースの実装であり、Pink Panda Walletアプリで多くのトークングラフをレンダリングするために使用されています。ドキュメントでは、滑らかなモバイルチャート機能に焦点を当てており、3次ベジェ曲線レンダリング、Skiaによるネイティブパス補間、アニメーション（READMEによれば最大120 FPS）、パン/スクラブジェスチャー、および仮想通貨ウォレット形式の価格履歴との互換性が挙げられています。 このパッケージはLineGraphコンポーネントをエクスポートします。必須のpropsは、points（数値値とDateを持つGraphPointオブジェクトの配列）とcolorです。ルートビューではReact NativeのViewPropsを受け入れます。アニメーション化されたboolean値によって、アニメーションレンダラーと、リスト内で多くのグラフを表示する際に推奨される軽量な静的レンダラーを切り替えることができます。オプションのrange propを使用すると、x軸、y軸、またはその両方を上書きでき、指定しない場合はpointsから軸が推論されます。 アニメーションモードでは、より多くの機能が利用可能になります。gradientFillColorsはラインの下に垂直方向のグラデーション塗りつぶしを追加します。lineThicknessで線の太さを制御します。enablePanGestureを有効にすると、プレス＆スクラブ操作が可能になり、onGestureStart、onPointSelected、onGestureEndのコールバックが提供されます。panGestureDelayで、スクラブが開始されるまでプレスを保持する必要がある時間を制御します。SelectionDotはスクラブ位置を描画し、別のコンポーネントに置き換えるか、nullで非表示にできます。horizontalPaddingとverticalPaddingで描画スペースを調整します。enableIndicatorとindicatorPulsatingは、最後のポイントにインジケーターを表示します。TopAxisLabelとBottomAxisLabelは、グラフの上部と下部にカスタムReact要素をレンダリングします。enableFadeInMaskはラインの開始部分をフェードインさせます。パンジェスチャー、ラベル、インジケーター、グラデーション塗りつぶし、SelectionDotなどの一部のpropsはアニメーション専用としてドキュメント化されています。また、selectionDotShadowColorは現在使用されておらず、視覚的な効果はないと記載されています。 READMEでは2つのレンダラーバックエンドについて説明しています。デフォルトはSkiaです。代替のGPUキャンバスバックエンドであるreact-native-tgfxは、ビルド時にEXPO_PUBLIC_RN_GRAPH_BACKEND=tgfx（またはBabelのinline-environment-variablesプラグインを使用したベアReact NativeではRN_GRAPH_BACKEND）で選択できます。インストールが必要なレンダラーは1つだけであり、Metroは両方をオプションとして扱います。tgfxが要求されたがインストールされていない場合、グラフは一度警告を表示し、Skiaにフォールバックします。カスタムのSelectionDotは、アクティブなレンダラーからshapesをインポートする必要があります。パッケージは、ビルドがどのレンダラーに解決されたか（'skia'または'tgfx'）を確認するためのGRAPH_BACKENDをエクスポートします。 インストールには、react-native-reanimated、react-native-gesture-handler、およびデフォルトバックエンド用の@shopify/react-native-skiaに加えて、react-native-graph自体が必要です。READMEには、usePriceHistoryフックを使用したLineGraphの使用例と、アニメーション、パンジェスチャー、範囲、カスタムSelectionDotのprops例が含まれています。また、リポジトリ内のカスタムSelectionDotの例へのリンクも提供されています。このプロジェクトはPink Pandaによってスポンサーされており、MargeloコミュニティのDiscordがあります。READMEでは、React Native Skiaへの協力についてWilliam Candillon氏とChristian Falch氏に謝意が述べられています。