React Native スキル
React Native および Expo アプリケーションのための包括的なベストプラクティスです。パフォーマンス、アニメーション、UI パターン、プラットフォーム固有の最適化にわたるルールを含みます。
適用タイミング
以下の状況でこれらのガイドラインを参照してください：
- React Native または Expo アプリの構築時
- リストやスクロールのパフォーマンス最適化時
- Reanimated を使用したアニメーションの実装時
- 画像やメディアの操作時
- ネイティブモジュールやフォントの設定時
- ネイティブ依存関係を持つモノレポプロジェクトの構造化時
ルールカテゴリ（優先度順）
| 優先度 | カテゴリ | 影響度 | プレフィックス |
|---|---|---|---|
| 1 | リストパフォーマンス | 重大 | list-performance- |
| 2 | アニメーション | 高 | animation- |
| 3 | ナビゲーション | 高 | navigation- |
| 4 | UI パターン | 高 | ui- |
| 5 | 状態管理 | 中 | react-state- |
| 6 | レンダリング | 中 | rendering- |
| 7 | モノレポ | 中 | monorepo- |
| 8 | 設定 | 低 | fonts-, imports- |
クイックリファレンス
1. リストパフォーマンス（重大）
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. アニメーション（高）
animation-gpu-properties- transform と opacity のみアニメーションさせるanimation-derived-value- 計算されたアニメーションには useDerivedValue を使用するanimation-gesture-detector-press- Pressable の代わりに Gesture.Tap を使用する
3. ナビゲーション（高）
navigation-native-navigators- JS ナビゲーターよりネイティブスタックとネイティブタブを使用する
4. UI パターン（高）
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. 状態管理（中）
react-state-minimize- 状態購読を最小化するreact-state-dispatcher- コールバックにはディスパッチャーパターンを使用するreact-state-fallback- 最初のレンダリングでフォールバックを表示するreact-compiler-destructure-functions- React Compiler のために分割代入するreact-compiler-reanimated-shared-values- コンパイラで共有値を扱う
6. レンダリング（中）
rendering-text-in-text-component- テキストは Text コンポーネントでラップするrendering-no-falsy-and- 条件付きレンダリングに偽の && を使用しない
7. モノレポ（中）
monorepo-native-deps-in-app- ネイティブ依存関係はアプリパッケージに保持するmonorepo-single-dependency-versions- パッケージ間で単一バージョンを使用する
8. 設定（低）
fonts-config-plugin- カスタムフォントには設定プラグインを使用するimports-design-system-folder- デザインシステムのインポートを整理するjs-hoist-intl- Intl オブジェクトの作成をホイストする
使い方
個別のルールファイルには、詳細な説明とコード例が含まれています：
rules/list-performance-virtualize.md
rules/animation-gpu-properties.md
各ルールファイルの内容：
- なぜ重要なのかの簡単な説明
- 誤ったコード例とその説明
- 正しいコード例とその説明
- 追加のコンテキストと参照
完全なコンパイルドキュメント
すべてのルールを展開した完全ガイドは AGENTS.md をご覧ください。