公式チュートリアル・サンプル集リンク
本書が「書かない」方針で各章から外した、環境構築・数値の詳細・サンプルプロジェクトへの公式リンク集です。
本書は概念の解説とコード例を中心に構成しており、環境依存の細かい手順や数値は各章から意図的に外し、公式ドキュメントへのリンクに委ねています。このページはその案内をまとめた一覧です。
セットアップ
インストールと環境構築
yarn add @shopify/react-native-skiaによるインストール手順、Expoのwith-skiaテンプレート、iOS/Androidそれぞれのネイティブビルド要件(Podのインストール、Android NDKの設定など)をまとめています。最初の描画とレンダリングモードで扱わなかった、プロジェクトへの導入そのものはここが起点です。
バンドルサイズの詳細
Web対応のしくみで触れたiOS約6MB・Android約4MB・Web約2.9MB(gzip)という数値の算出方法を、Android App BundleでのAPK差分やiOSのAd-Hoc配布レポートを例に詳しく解説しています。
実践トピックの補足
Headless: GPUアクセラレーションの構成
Headlessレンダリングの章で扱った基本のオフスクリーン描画に加え、Node環境でGPUアクセラレーションを有効にするためのOffscreenCanvas APIポリフィルの構成例へのリンクがあります。
Video: APIリファレンス全体
動画の描画の章で扱ったuseVideoの使い方一式に対応する公式ページです。オプションやAPIの追加・変更は、まずここで最新の内容を確認してください。
Web Support: 手動セットアップの全手順
Web対応のしくみではCanvasKitのロードと.web拡張子解決という2つの要点に絞って解説しました。CDNロード・コード分割・遅延登録など、Webpack/Viteプロジェクト向けの手動セットアップ手順一式はこちらにまとまっています。
公式チュートリアル・サンプルプロジェクト
React Native Skiaの公式ドキュメントには、コミュニティが作成した実装例へのリンク集「Tutorials」があります。動画とコードの両方が公開されているものが多く、本書で扱いきれなかった応用的な実装(ゲーム開発、コンピュータービジョン連携など)の入り口として参照してください。
符号付き距離関数(SDF)
- The Shader’s Gambit — SDFを使ったチェス盤表現
- Skia Shaders and the SDF of a Line — 線分のSDFをシェーダーで書く基礎
- Liquid Glass with React Native Skia — ガラス風の屈折表現
アニメーション
- The Matrix Reacts — マトリックス風の落下文字エフェクト
- Animated 3D Card in React Native — カードの3D回転アニメーション
- Metaball Animation in React Native — メタボール(液体風)アニメーション
- Grid Magnification in React Native Skia — グリッドの拡大鏡表現
- Arc Slider with React-Native Skia, React-Native Gesture Handler and Reanimated 2 — 円弧型のスライダーUI
- Pixelated Image with React-Native Skia — 画像のピクセル化エフェクト
- Typography Metaball with React Native Skia — 文字とメタボールの融合表現
- Color Pixelated — 色付きピクセル化エフェクト
- Animated Loader with React Native Skia — ローディングアニメーション
- Animated Blur Cards with React Native Skia — ぼかしを使ったカードアニメーション
- Basic 3D Graphics with Linear Algebra and React-Native Skia — 線形代数を使った基礎的な3D表現
ジェスチャー
- Instagram Stickers — Instagram風のステッカー操作(拡大・回転・移動)
バックドロップフィルター
- Liquid Glass with React Native Skia — ガラス風の屈折表現(SDFとも関連)
- Glassmorphism in React Native — すりガラス風のグラスモーフィズム表現
チャート
- Charts in React Native Skia — 折れ線グラフなどのチャート実装
- Circular Progress in React Native — 円形プログレスインジケーター
イメージフィルター
- Neumorphism in React Native — ニューモーフィズム表現(高度なイメージフィルターの応用)
グラデーション
- Introducing Gen-Z Mode — グラデーションを使ったテーマ切り替え
- iPhone wallpapers, but in React Native Skia — iPhone風壁紙のグラデーション再現
- Experimental Blur Gradient in React Native — ぼかしとグラデーションの組み合わせ
- Animated Gradient with React Native Skia — アニメーションするグラデーション
シェーダー
- Shader Transitions — シェーダーによる画面遷移エフェクト
- Riveo Page Curl — ページめくりエフェクト
- It’s Severance, but in React Native — Apple TV「Severance」風の映像エフェクト
- The Joy of Painting with React Native — 絵筆風の描画表現
- Song of Bloom — ブルーム(発光)エフェクト
パス
- Gradient along Path — パスに沿ったグラデーション(多角形とパスの応用)
- Headspace Player — Headspaceアプリ風の再生UI
- Liquid Wave Progress Indicator — 波形の進捗インジケーター(Skia・Reanimated・D3の組み合わせ)
ネイティブビュー
- Telegram Dark Mode — Telegram風のダークモード切り替えエフェクト
コンピュータービジョン
- Add Computer Vision to your Expo iOS App using React-Native Skia — Expo製iOSアプリへのコンピュータービジョン組み込み
ゲーム
- Introduction to Game Development with Expo, Skia and Reanimated — Expo・Skia・Reanimatedによるゲーム開発入門
- 2D Game Physics with Matter.js, React Native Skia and Expo — Matter.jsを使った2D物理演算ゲーム
最新の一覧は随時更新されるため、公式のTutorialsページを直接確認することをおすすめします。