mcpField
R
react-native

react-native

github.com/oakoss開発21111 回インストール12 週間前に更新
リポジトリ

react-native について

Expo で TypeScript コードベースから React Native アプリを開発するためのスキルです。iOS、Android、Web を対象とし、ファイルベースルーティング、クラウドビルドと更新、カメラや通知などのネイティブ API を扱います。

主な機能

  1. 01Expo Router によるファイルベースルーティング
  2. 02EAS によるビルドと提出
  3. 03JavaScript の OTA 更新
  4. 04カメラ、通知、触覚機能の統合
  5. 05プラットフォーム差異とネイティブモジュールへの対応

活用シーン

  1. 01iOS と Android 向けアプリの開発
  2. 02Web 対応のユニバーサルアプリ構築
  3. 03アプリストア向けビルドと提出フローの設定
  4. 04カメラやプッシュ通知機能の追加

インストール

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

$npx skills add https://github.com/oakoss/agent-skills --skill react-native

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

同梱ファイル

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

references/
app-configuration.md
core-patterns.md
device-apis.md
eas-workflows.md
expo-router.md
native-modules.md
nativewind.md
performance-patterns.md

詳細

React Native と Expo

概要

Expo は、単一の TypeScript コードベースから React Native を使用してユニバーサルなネイティブアプリを構築するためのオープンソースフレームワークです。ファイルベースのルーティング（Expo Router）、クラウドビルドサービス（EAS Build/Submit/Update）、デバイス API 用の豊富なネイティブモジュールを提供します。

使用するケース： iOS と Android を対象とするモバイルアプリ、Web に対応したユニバーサルアプリ、OTA アップデートが必要なプロジェクト、ネイティブのデバイス API（カメラ、通知、ハプティクス）を必要とするアプリ、ベアな React Native よりもマネージドなインフラストラクチャを好むチーム。

使用しないケース： Expo Modules API と互換性のない高度なカスタムネイティブコードが必要なアプリ、既存のネイティブアプリへのブラウンフィールド統合、ネイティブのみの CI/CD 要件があるアプリ。

クイックリファレンス

パターンAPI主なポイント
スタックナビゲーション<Stack> from expo-routerファイルベースで、_layout.tsx がナビゲーターを定義します
タブナビゲーション<Tabs> from expo-router(tabs) ディレクトリグループと _layout.tsx を使用します
ドロワーナビゲーション<Drawer> from expo-router/drawer@react-navigation/drawer が必要です
型付きルートhref with /(group)/routeapp.json で typed-routes を有効にします
開発ビルドexpo-dev-clientカスタムネイティブコードと開発ツール
EAS Buildeas build --profile productionアプリストア向けのクラウドビルド
EAS Submiteas submit -p ios / -p androidストアへの自動提出
OTA アップデートeas update --branch productionJS のみのアップデートで、再ビルドは不要です
ネイティブモジュールExpo Modules APIexpo-module.config.json を使った Swift/Kotlin
プラットフォームコードPlatform.select() / .ios.tsxプラットフォームごとのロジックまたはファイル全体
スタイル付きリストFlatList / FlashList仮想化されており、keyExtractor が必要です
カメラexpo-camerauseCameraPermissions() による権限管理
通知expo-notificationsgetExpoPushTokenAsync() によるプッシュトークン
ハプティクスexpo-hapticsimpactAsync、notificationAsync
Tailwind（RN）NativeWind v4className プロパティで、RN に Tailwind CSS を使用します

よくある間違い

間違い正しいパターン
Expo Router ではなく react-navigation を直接使用するExpo Router はファイルベースのルーティングで React Navigation をラップします
ルートディレクトリに _layout.tsx を置き忘れるルートを含むすべてのディレクトリにレイアウトファイルが必要です
カスタムネイティブコードに expo start を使用するexpo-dev-client とともに expo start --dev-client を使用します
ネイティブ依存関係の変更後に eas update を実行するネイティブの変更には eas build が必要です。OTA は JS のみです
if を使ってプラットフォームをハードコードで判定するPlatform.select() またはプラットフォーム固有のファイル拡張子を使用します
デバイス API にアクセスする前に権限を要求しないカメラや通知を使用する前に、必ず権限を確認または要求します
長いリストに ScrollView を使用する仮想化レンダリングには FlatList または FlashList を使用します
レンダー関数内でインラインスタイルを使うコンポーネントの外で StyleSheet.create() を使ってスタイルを定義します
FlatList に keyExtractor がないリストを安定してレンダリングするため、必ず keyExtractor を指定します
Expo が提供する API を react-native からインポートするreact-native の同等機能より expo-* パッケージを優先します

委任

  • パターンの発見：Explore エージェントを使用します
  • ビルド／デプロイのレビュー：Task エージェントを使用します
  • コードレビュー：code-reviewer エージェントに委任します

react-patterns スキルが利用できる場合は、React コンポーネントのパターンとフックを委任します。 tanstack-query スキルが利用できる場合は、データ取得とキャッシュを委任します。 zustand スキルが利用できる場合は、クライアント側の状態管理を委任します。 vitest-testing スキルが利用できる場合は、ユニットテストとコンポーネントテストのパターンを委任します。 tailwind スキルが利用できる場合は、Tailwind CSS のユーティリティパターンを委任します（NativeWind は Tailwind CSS の構文を使用します）。 accessibility スキルが利用できる場合は、モバイルのアクセシビリティパターンを委任します。

参考資料

コメント

Markdown 対応