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

Expo SDK を 54 から 55 に上げたタイミングで、グラフを表示していた画面が起動直後にクラッシュするようになった。

エラーはこれだ。

Invariant Violation: requireNativeComponent: "RNSVGSvgView" was not found

原因

react-native-chart-kit はグラフ描画に react-native-svg を内部で使っている。Expo SDK 55/56 環境では、react-native-svg のネイティブモジュールが正しく解決されないケースがある。特に Expo Go で動かしている場合や、SDK のメジャーアップデート直後のタイミングで踏みやすい。

試したこと：

react-native-svg を明示的に依存に追加 → 変わらず
バージョンを固定してみる → 変わらず
expo install react-native-svg で Expo 互換バージョンに合わせる → 動いたりクラッシュしたりが不安定

根本的に react-native-chart-kit と Expo SDK の最新バージョンとの相性が悪かった。

対処：自前のグラフコンポーネントに切り替えた

react-native-chart-kit を削除して、SVGに依存しない自前のグラフコンポーネントを作った。

React Native の 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>
  );
}

棒グラフなら View を並べるだけなのでさらにシンプルだ。

自前実装のメリット

ライブラリのバージョン依存がなくなった。アニメーションやインタラクションは自分でコントロールできる。カスタマイズも自由だ。

デメリットは実装コストがかかること。折れ線と棒グラフだけなら1〜2時間で済むが、複雑なグラフ（エリアチャート・複数系列・ズーム対応など）が必要なら別のライブラリを選んだ方がいい。

代替ライブラリとして検討したもの

victory-native はSVG依存の問題を回避する設計になっており、Expo SDKとの相性は比較的いい。ただしバンドルサイズが大きめで、シンプルなグラフ用途には少し重い。

react-native-skia（Expo公式サポート）はより低レベルだが高品質な描画ができる。Expo SDK 50以降で公式サポートされている。グラフだけのために導入するには大げさだが、UI全体で描画品質にこだわる場合は選択肢に入る。

まとめ

Expo SDK 55/56 で react-native-chart-kit は不安定になりやすい
原因は react-native-svg のネイティブモジュール解決の問題
シンプルなグラフなら View + 絶対配置で自前実装する方が安定する
複雑な要件なら victory-native か react-native-skia を検討する