mcpField
R
react-native-ecosystem

react-native-ecosystem

github.com/maikotrindade開発1345 回インストール今日更新
リポジトリ

react-native-ecosystem について

react-native-ecosystemは、React Nativeアプリ開発者向けのリファレンススキルです。ナビゲーション、状態管理、データ取得、デバイス機能、アクセシビリティなどのライブラリと実践方法をテーマ別にまとめ、ツール選定の指針も示します。

主な機能

  1. 01React Navigation v7のナビゲーターとルートの指針
  2. 02Zustand、Jotai、Redux Toolkitの状態管理パターン
  3. 03TanStack QueryとAxiosによるデータ取得
  4. 04ReanimatedとGesture Handlerのアニメーション
  5. 05ストレージ、権限、プッシュ通知
  6. 06アクセシビリティとディープリンクの実践方法

活用シーン

  1. 01ナビゲーションと状態管理パターンの選定
  2. 02データ取得とオフラインリストの実装
  3. 03ジェスチャー、アニメーション、デバイス機能の追加
  4. 04アクセシビリティとディープリンクの指針の適用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/maikotrindade/awesome-react-native-skills --skill react-native-ecosystem

インストール後、Claude Code で/react-native-ecosystemを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
advanced-deep-linking.md
best-practices-accessibility.md
core-data-fetching.md
core-navigation.md
core-state-management.md
core-typescript.md
features-gesture-handler.md
features-permissions.md
features-push-notifications.md
features-reanimated.md
features-storage.md

詳細

React Native エコシステム

2026 年時点の React Native エコシステムのライブラリと、本番環境でのパターンを扱います。

こちらもご覧ください：

  • RN のコアプリミティブ（View、Text、StyleSheet、FlatList、New Architecture）→ react-native-core
  • Expo SDK と EAS ツール → react-native-expo
  • 高度なパフォーマンス改善（FPS、バンドル、TTI、メモリ、ネイティブ）→ react-native-performance
  • React Native Testing Library の詳細 → react-native-testing

コアリファレンス

トピック説明リファレンス
ナビゲーションReact Navigation v7 — NativeStack、タブ、ドロワー、型付きルート、モーダルcore-navigation
状態管理Zustand、Jotai、Redux Toolkit — セットアップ、開発ツール、永続化のパターンcore-state-management
データ取得TanStack Query v5 + Axios — クエリ、ミューテーション、無限リスト、オフラインcore-data-fetching
TypeScript厳密な設定、コンポーネントの型付け、ナビゲーションの型付け、zod による検証core-typescript

機能

アニメーションとジェスチャー
トピック説明リファレンス
Reanimated v3useSharedValue、useAnimatedStyle、withTiming/Spring、レイアウトアニメーション、Keyframefeatures-reanimated
Gesture Handler v2GestureDetector、Tap/Pan/Pinch/LongPress、ジェスチャーの合成、Reanimated との統合features-gesture-handler
デバイスとプラットフォーム
トピック説明リファレンス
ストレージMMKV、AsyncStorage、Expo SecureStore — 適切なソリューションの選び方features-storage
権限react-native-permissions — 確認、リクエスト、理由の説明、openSettingsfeatures-permissions
プッシュ通知Firebase 経由の FCM + APNs、トークン登録、フォアグラウンド／バックグラウンドでの処理features-push-notifications

ベストプラクティス

トピック説明リファレンス
アクセシビリティa11y props、スクリーンリーダーのテスト、セマンティックロール、フォーカス管理best-practices-accessibility

高度なトピック

トピック説明リファレンス
ディープリンクUniversal Links、App Links、React Navigation のリンク設定、ダイナミックリンクadvanced-deep-linking

主な推奨事項

  • ナビゲーション：JS スタックより createNativeStackNavigator を使用し、すべてのルートを RootStackParamList で型付けします
  • 状態とサーバー：クライアント／UI の状態には Zustand、サーバーの状態には TanStack Query を使用し、役割を混在させないでください
  • アニメーション：従来の Animated API より Reanimated v3 を優先します。ワークレットはデフォルトで UI スレッド上で実行されます
  • ストレージ：頻繁な読み書きには MMKV（同期、10 倍高速）、シンプルな永続化には AsyncStorage、認証情報には SecureStore を使用します
  • TypeScript：strict: true を有効にし、useNavigation<NavigationProp<RootStackParamList>>() でナビゲーションを型付けします

コメント

Markdown 対応