React Native Skills
React Native および Expo アプリケーション向けの包括的なベストプラクティスです。パフォーマンス、アニメーション、UI パターン、プラットフォーム固有の最適化にわたる複数カテゴリのルールを含みます。
適用タイミング
以下の場合にこれらのガイドラインを参照してください：
- React Native または Expo アプリを構築する場合
- リストおよびスクロールのパフォーマンスを最適化する場合
- Reanimated でアニメーションを実装する場合
- 画像やメディアを扱う場合
- ネイティブモジュールやフォントを設定する場合
- ネイティブ依存関係を含むモノレポプロジェクトを構成する場合
優先度別ルールカテゴリ
| 優先度 | カテゴリ | 影響度 | プレフィックス |
|---|---|---|---|
| 1 | リストパフォーマンス | CRITICAL | list-performance- |
| 2 | アニメーション | HIGH | animation- |
| 3 | ナビゲーション | HIGH | navigation- |
| 4 | UI パターン | HIGH | ui- |
| 5 | 状態管理 | MEDIUM | react-state- |
| 6 | レンダリング | MEDIUM | rendering- |
| 7 | モノレポ | MEDIUM | monorepo- |
| 8 | 設定 | LOW | fonts-, imports- |
クイックリファレンス
1. リストパフォーマンス (CRITICAL)
list-performance-virtualize- 大規模リストには FlashList を使用する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- 異種リストには項目タイプを使用する
2. アニメーション (HIGH)
animation-gpu-properties- transform と opacity のみをアニメーション化するanimation-derived-value- 計算されたアニメーションには useDerivedValue を使用するanimation-gesture-detector-press- Pressable の代わりに Gesture.Tap を使用する
3. ナビゲーション (HIGH)
navigation-native-navigators- JS ナビゲーターよりネイティブスタックとネイティブタブを使用する
4. UI パターン (HIGH)
ui-expo-image- すべての画像に expo-image を使用するui-image-gallery- 画像ライトボックスには Galeria を使用するui-pressable- TouchableOpacity より Pressable を使用するui-safe-area-scroll- ScrollView でセーフエリアを扱うui-scrollview-content-inset- ヘッダーには contentInset を使用するui-menus- ネイティブコンテキストメニューを使用するui-native-modals- 可能な場合はネイティブモーダルを使用するui-measure-views- measure() ではなく onLayout を使用するui-styling- StyleSheet.create または Nativewind を使用する
5. 状態管理 (MEDIUM)
react-state-minimize- 状態サブスクリプションを最小化するreact-state-dispatcher- コールバックにはディスパッチャーパターンを使用するreact-state-fallback- 初回レンダリング時にフォールバックを表示するreact-compiler-destructure-functions- React Compiler のために分割代入するreact-compiler-reanimated-shared-values- コンパイラで共有値を扱う
6. レンダリング (MEDIUM)
rendering-text-in-text-component- テキストを Text コンポーネントでラップするrendering-no-falsy-and- 条件付きレンダリングに偽の && を使用しない
7. モノレポ (MEDIUM)
monorepo-native-deps-in-app- ネイティブ依存関係はアプリパッケージに保持するmonorepo-single-dependency-versions- パッケージ間で単一バージョンを使用する
8. 設定 (LOW)
fonts-config-plugin- カスタムフォントには設定プラグインを使用するimports-design-system-folder- デザインシステムのインポートを整理するjs-hoist-intl- Intl オブジェクトの生成を巻き上げる
使用方法
詳細な説明とコード例については、個別のルールファイルを参照してください：
rules/list-performance-virtualize.md
rules/animation-gpu-properties.md
各ルールファイルには以下が含まれます：
- なぜそれが重要なのかの簡単な説明
- 説明付きの誤ったコード例
- 説明付きの正しいコード例
- 追加のコンテキストと参考情報
完全なコンパイルドキュメント
すべてのルールを展開した完全なガイドについては：AGENTS.md