react-native

React Native 完全ガイド

以下を組み合わせた、React Native の究極の最適化ガイドです。

• Callstack - プロファイリング、測定、ネイティブ最適化（27 件の参考資料）
• Vercel - コードパターン、UI、ベストプラクティス（36 のルール）

適用するタイミング

以下の場合に、これらのガイドラインを参照してください。

• 遅い、またはカクつく UI やアニメーションのデバッグ
• リストやスクロールのパフォーマンスの最適化
• メモリリーク（JS またはネイティブ）の調査
• アプリの起動時間（TTI）の最適化
• バンドルやアプリのサイズの削減
• Reanimated を使ったアニメーションの実装
• ネイティブコンポーネントを使った UI の構築
• React Compiler の利用
• モノレポプロジェクトの構成

優先度順のガイドライン

優先度	カテゴリ	影響度	ソース
1	コアレンダリング	CRITICAL	Vercel
2	リストのパフォーマンス	CRITICAL	Both
3	FPS と再レンダリング	CRITICAL	Callstack
4	バンドルサイズ	CRITICAL	Callstack
5	アニメーション	HIGH	Both
6	ナビゲーション	HIGH	Vercel
7	TTI の最適化	HIGH	Callstack
8	UI パターン	HIGH	Vercel
9	ネイティブパフォーマンス	HIGH	Callstack
10	状態管理	MEDIUM	Vercel
11	React Compiler	MEDIUM	Both
12	メモリ管理	MEDIUM	Callstack
13	モノレポ	MEDIUM	Vercel

---

クイックリファレンス：コードパターン（Vercel）

コアレンダリング（CRITICAL）

• rendering-no-falsy-and - 偽値と && を決して使用しないでください（アプリがクラッシュします）
• rendering-text-in-text-component - 文字列を Text コンポーネントで囲みます

リストのパフォーマンス（CRITICAL）

• list-performance-virtualize - すべてのリストで FlashList/LegendList を使用します
• list-performance-item-memo - リスト項目のコンポーネントをメモ化します
• list-performance-callbacks - コールバックの参照を安定させます
• list-performance-inline-objects - インラインのスタイルオブジェクトを避けます
• list-performance-function-references - 関数をレンダリングの外に切り出します
• list-performance-images - 圧縮済みの適切なサイズの画像を使用します
• list-performance-item-expensive - 負荷の高い処理を項目の外に移します
• list-performance-item-types - 異種リストでは項目タイプを使用します

アニメーション（HIGH）

• animation-gpu-properties - transform と opacity のみをアニメーションさせます
• animation-derived-value - 計算されたアニメーションには useDerivedValue を使用します
• animation-gesture-detector-press - 押下アニメーションには Gesture.Tap を使用します

ナビゲーション（HIGH）

• navigation-native-navigators - JS ナビゲーターよりネイティブの stack/tabs を使用します

UI パターン（HIGH）

• ui-expo-image - すべての画像に expo-image を使用します
• ui-image-gallery - ライトボックスには Galeria を使用します
• ui-pressable - TouchableOpacity より Pressable を使用します
• ui-safe-area-scroll - contentInsetAdjustmentBehavior を使用します
• ui-scrollview-content-inset - 動的な間隔には contentInset を使用します
• ui-menus - ネイティブのコンテキストメニュー（zeego）を使用します
• ui-native-modals - JS のボトムシートよりネイティブのモーダルを使用します
• ui-measure-views - measure() ではなく onLayout を使用します
• ui-styling - StyleSheet.create、gap、borderCurve を使用します

状態管理（MEDIUM）

• react-state-minimize - 値を導出し、状態を最小限に抑えます
• react-state-dispatcher - dispatch アップデーターを使用します
• react-state-fallback - リアクティブなデフォルト値にはフォールバックパターンを使用します
• state-ground-truth - 状態を真の値として扱い、表示要素はそこから導出します

React Compiler（MEDIUM）

• react-compiler-destructure-functions - 関数を早い段階で分割代入します
• react-compiler-reanimated-shared-values - .value ではなく .get()/.set() を使用します

モノレポ（MEDIUM）

• monorepo-native-deps-in-app - ネイティブ依存関係はアプリのパッケージにインストールします
• monorepo-single-dependency-versions - パッケージ間で依存関係のバージョンを統一します

構成（LOW）

• fonts-config-plugin - ビルド時にフォントを読み込みます
• imports-design-system-folder - デザインシステムから再エクスポートします
• js-hoist-intl - Intl フォーマッターの生成をホイストします

---

クイックリファレンス：プロファイリングと測定（Callstack）

FPS と再レンダリング（重大）

# Open React Native DevTools
# Press 'j' in Metro, or shake device → "Open DevTools"

• js-profile-react.md - React DevTools によるプロファイリング
• js-measure-fps.md - FPS のモニタリング
• js-react-compiler.md - 自動メモ化
• js-atomic-state.md - Jotai/Zustand のパターン
• js-concurrent-react.md - useDeferredValue、useTransition

バンドルサイズ（重大）

npx react-native bundle \
  --entry-file index.js \
  --bundle-output output.js \
  --platform ios \
  --sourcemap-output output.js.map \
  --dev false --minify true

npx source-map-explorer output.js --no-border-checks

• bundle-barrel-exports.md - バレルインポートを避ける
• bundle-analyze-js.md - JS バンドルの可視化
• bundle-tree-shaking.md - デッドコードの削除
• bundle-r8-android.md - Android コードの縮小
• bundle-hermes-mmap.md - バンドル圧縮を無効にする

TTI の最適化（高）

• native-measure-tti.md - TTI 測定のセットアップ
• bundle-hermes-mmap.md - Hermes mmap を有効にする
• InteractionManager を使用して、重要度の低い処理を遅延させます

ネイティブパフォーマンス（高）

• iOS：Xcode Instruments → Time Profiler
• Android：Android Studio → CPU Profiler
• native-turbo-modules.md - 高速なネイティブモジュールの構築
• native-threading-model.md - Turbo Module のスレッド
• native-profiling.md - プラットフォーム別プロファイリングガイド

メモリ管理（中）

• js-memory-leaks.md - JS メモリリークの調査
• native-memory-leaks.md - ネイティブメモリリーク
• native-memory-patterns.md - C++/Swift/Kotlin のメモリ

アニメーション（中）

• js-animations-reanimated.md - Reanimated のワークレット

---

問題 → 解決策の対応表

問題	Vercel のルール	Callstack の参考資料
アプリがクラッシュする	rendering-no-falsy-and、rendering-text-in-text-component	-
リストのスクロールがカクつく	list-performance-*	js-lists-flatlist-flashlist.md
アニメーションでフレームが落ちる	animation-gpu-properties	js-animations-reanimated.md
再レンダリングが多すぎる	react-state-minimize	js-profile-react.md、js-react-compiler.md
起動が遅い（TTI）	-	native-measure-tti.md、bundle-hermes-mmap.md
アプリサイズが大きい	-	bundle-analyze-app.md、bundle-r8-android.md
メモリ使用量が増加する	-	js-memory-leaks.md、native-memory-leaks.md
TextInput の入力が遅れる	-	js-uncontrolled-components.md
ネイティブモジュールが遅い	-	native-turbo-modules.md

---

ファイル構成

react-native/
├── SKILL.md          # This file
├── AGENTS.md         # Full 74KB compiled Vercel guide
├── rules/            # 36 individual Vercel rule files
│   ├── list-performance-*.md
│   ├── animation-*.md
│   ├── ui-*.md
│   └── ...
└── references/       # 27 Callstack reference files
    ├── js-*.md
    ├── native-*.md
    ├── bundle-*.md
    └── images/

クレジット

以下を組み合わせています：

• Callstack の「The Ultimate Guide to React Native Optimization」
• Vercel の React Native Skills