React Native Skiaで、アプリの描画表現に限界を感じなくなった話

はじめに

React Nativeでアプリを作っていて、「デザイナーから渡されたリッチなUIが標準コンポーネントでは再現できない」と頭を抱えたことはありませんか？グラデーションが複雑に重なるカード、ぬるぬる動くチャート、ガラスのようなブラー効果……。ViewとStyleSheetだけで戦うには、あまりに厳しい要求です。

そんな壁を一気に壊してくれるのが、Shopifyが開発するReact Native Skiaです。Google ChromeやAndroid、Flutterの描画を支えるグラフィックスエンジン「Skia」を、Reactの宣言的なコンポーネントとしてそのまま使えるようにしたライブラリです。この記事では、基本の描画からアニメーション、シェーダーまで、実際に手を動かせるコード付きで紹介します。

React Native Skiaとは

React Native Skia（@shopify/react-native-skia）は、2DグラフィックスエンジンSkiaをReact Nativeから利用するためのライブラリです。GitHubで8,000を超えるスターを集め、2026年7月時点の最新版はv2.8.0と、現在も活発に開発が続いています。

Skia自体はC++製のエンジンですが、React Native SkiaはJSI（JavaScript Interface）経由で直接バインドしているため、ブリッジのシリアライズコストなしにネイティブ描画性能を引き出せます。しかも書き味は普通のReactコンポーネントそのものです。

主な特徴

宣言的API - <Canvas>の中に<Circle>や<Path>をJSXで並べるだけで描画できます。Reactの状態管理やコンポーネント分割の知識がそのまま活きます
ネイティブ級のパフォーマンス - GPUアクセラレーションされたSkiaエンジンが直接描画するため、複雑な図形やアニメーションも60fpsで動作します
Reanimatedとのシームレスな連携 - React Native ReanimatedのSharedValueをそのままプロパティに渡せるため、UIスレッドで完結する滑らかなアニメーションが書けます
シェーダー対応 - Skia Shading Language（SkSL）でフラグメントシェーダーを書けるので、グロー、ノイズ、歪みといったGPUエフェクトも自由自在です
マルチプラットフォーム - iOS / Androidに加え、Web、macOS、tvOSでも動作します

インストール

npmまたはyarnでインストールします。

npm install @shopify/react-native-skia
# または
yarn add @shopify/react-native-skia

バージョン要件には注意が必要です。

React Native 0.79以上、React 19以上
iOS 14以上、Android APIレベル21以上
それ以前の環境ではv1.12.4以下を使用します

iOSではiosディレクトリでpod installを実行してください。AndroidではNDKが必要になるため、Android Studioの「File > Project Structure > SDK Location」からインストールしておきます。

Expoを使う場合は、Skia入りのテンプレートから新規プロジェクトを作るのが最速です。

yarn create expo-app my-app -e with-skia

基本的な使い方

まずは公式の「Hello World」である、3つの円をブレンドモードで重ねる例です。コピペでそのまま動きます。

import React from "react";
import { Canvas, Circle, Group } from "@shopify/react-native-skia";

const App = () => {
  const width = 256;
  const height = 256;
  const r = width * 0.33;
  return (
    <Canvas style={{ width, height }}>
      <Group blendMode="multiply">
        <Circle cx={r} cy={r} r={r} color="cyan" />
        <Circle cx={width - r} cy={r} r={r} color="magenta" />
        <Circle cx={width / 2} cy={width - r} r={r} color="yellow" />
      </Group>
    </Canvas>
  );
};
export default App;

<Canvas>が描画領域のルートで、その中に図形コンポーネントを宣言的に配置します。<Group>はブレンドモードや変形をまとめて適用できるコンテナで、CSSでは表現しにくい「乗算合成」もプロパティ1つで実現できています。

Reanimatedと組み合わせたアニメーション

React Native Skiaの真価は、Reanimatedとの連携で発揮されます。SharedValueをそのままプロパティに渡せるため、JSスレッドを介さない滑らかなアニメーションが数行で書けます。

import React, { useEffect } from "react";
import { Canvas, Circle } from "@shopify/react-native-skia";
import {
  useSharedValue,
  withRepeat,
  withTiming,
} from "react-native-reanimated";

const PulsingCircle = () => {
  const r = useSharedValue(20);

  useEffect(() => {
    r.value = withRepeat(withTiming(80, { duration: 1000 }), -1, true);
  }, [r]);

  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Circle cx={128} cy={128} r={r} color="#61dafb" />
    </Canvas>
  );
};
export default PulsingCircle;

半径rがSharedValueになっているだけで、円が脈打つように拡大縮小を繰り返します。値の更新はUIスレッドで完結するため、JS側で重い処理が走っていてもアニメーションはカクつきません。

実践的なユースケース

グラデーション付きのカスタムチャート

チャートライブラリのデザインをそのまま使うと、どうしても「ライブラリっぽさ」が出てしまいます。SkiaならPathとLinearGradientを組み合わせて、デザインに完全準拠したチャートを自作できます。

import React from "react";
import {
  Canvas,
  Path,
  Skia,
  LinearGradient,
  vec,
} from "@shopify/react-native-skia";

const data = [30, 80, 45, 95, 60, 110, 75];
const WIDTH = 320;
const HEIGHT = 160;

const buildPath = () => {
  const path = Skia.Path.Make();
  const stepX = WIDTH / (data.length - 1);
  path.moveTo(0, HEIGHT - data[0]);
  data.forEach((v, i) => path.lineTo(i * stepX, HEIGHT - v));
  path.lineTo(WIDTH, HEIGHT);
  path.lineTo(0, HEIGHT);
  path.close();
  return path;
};

const AreaChart = () => (
  <Canvas style={{ width: WIDTH, height: HEIGHT }}>
    <Path path={buildPath()}>
      <LinearGradient
        start={vec(0, 0)}
        end={vec(0, HEIGHT)}
        colors={["#61dafb", "rgba(97, 218, 251, 0.05)"]}
      />
    </Path>
  </Canvas>
);
export default AreaChart;

Skia.Path.Make()で命令的にパスを構築し、それを宣言的な<Path>に渡すハイブリッドなスタイルが特徴です。データをSharedValue化すれば、値の変化に追従してぬるぬる動くチャートにも発展させられます。

SkSLシェーダーでGPUエフェクト

「Webでいうところのシェーダーアート」をモバイルアプリに持ち込めるのも大きな魅力です。SkSL（Skia Shading Language）で書いたフラグメントシェーダーを<Shader>として適用できます。

import React from "react";
import { Canvas, Fill, Shader, Skia } from "@shopify/react-native-skia";

const source = Skia.RuntimeEffect.Make(`
uniform float2 resolution;

half4 main(float2 pos) {
  float2 uv = pos / resolution;
  return half4(uv.x, uv.y, 0.8, 1.0);
}
`)!;

const GradientBackground = () => (
  <Canvas style={{ flex: 1 }}>
    <Fill>
      <Shader source={source} uniforms={{ resolution: [400, 800] }} />
    </Fill>
  </Canvas>
);
export default GradientBackground;