Expo で react-native-chart-kit がクラッシュする問題：SVG依存を捨てて解決した

Expo SDK を新しいバージョンに上げたら、react-native-chart-kit を使ったグラフ画面が起動直後にクラッシュするようになった。

事象

グラフを表示する画面に入った瞬間に、次のエラーで落ちる。

Invariant Violation: requireNativeComponent: "RNSVGSvgView" was not found

Expo Go で動かしているとき、または SDK のメジャーアップデート直後に踏みやすい

原因

react-native-chart-kit はグラフ描画に react-native-svg を内部で使っている。新しい Expo SDK 環境では、この react-native-svg のネイティブモジュールが正しく解決されないことがある。

切り分けで試した結果：

react-native-svg を明示的に依存へ追加 → 変わらず
バージョン固定 → 変わらず
expo install react-native-svg で互換バージョンに合わせる → 動いたり落ちたりで不安定

react-native-chart-kit と新しい Expo SDK の相性そのものが原因で、SVG 依存を抱えている限り安定しなかった。

解決策

react-native-chart-kit を削除し、SVGに依存しない自前グラフコンポーネントに切り替えた。折れ線グラフは View と絶対配置だけで実装できる。

interface DataPoint {
  value: number;
  label: string;
}

interface SimpleLineChartProps {
  data: DataPoint[];
  width: number;
  height: number;
  color?: string;
}

export function SimpleLineChart({
  data,
  width,
  height,
  color = '#4A90E2',
}: SimpleLineChartProps) {
  if (data.length < 2) return null;

  const values = data.map((d) => d.value);
  const min = Math.min(...values);
  const max = Math.max(...values);
  const range = max - min || 1;

  const points = data.map((d, i) => ({
    x: (i / (data.length - 1)) * width,
    y: height - ((d.value - min) / range) * height,
  }));

  return (
    <View style={{ width, height, position: 'relative' }}>
      {points.slice(1).map((point, i) => {
        const prev = points[i];
        const dx = point.x - prev.x;
        const dy = point.y - prev.y;
        const length = Math.sqrt(dx * dx + dy * dy);
        const angle = Math.atan2(dy, dx) * (180 / Math.PI);

        return (
          <View
            key={i}
            style={{
              position: 'absolute',
              left: prev.x,
              top: prev.y,
              width: length,
              height: 2,
              backgroundColor: color,
              transformOrigin: 'left center',
              transform: [{ rotate: `${angle}deg` }],
            }}
          />
        );
      })}
    </View>
  );
}

この実装で使っている transformOrigin は React Native 0.74 以降でないと効かない。古い環境では回転の基点が中央になり、線がずれて繋がらないので注意する。

棒グラフなら View を並べるだけでさらにシンプルになる。ライブラリのバージョン依存が消え、アニメーションもカスタマイズも自分で制御できる。

補足：複雑なグラフが必要な場合

折れ線・棒グラフ程度なら自前実装が安定だが、エリアチャート・複数系列・ズームなどが必要ならライブラリを使う方が早い。

victory-native：SVG依存の問題を回避する設計。Expo SDKとの相性は比較的いい。バンドルサイズはやや大きい
react-native-skia：低レベルだが高品質。Expo SDK 50以降で公式サポート。グラフだけなら大げさだが、描画品質全体にこだわるなら有力

事象

原因

解決策

補足：複雑なグラフが必要な場合

関連記事