mcpField
E
expo-sdk

expo-sdk

github.com/dralgorhythm開発12856 回インストール14 週間前に更新
リポジトリ

expo-sdk について

Expo SDK 54+を使うReact Native開発者向けのスキルです。アプリ設定、ルーティングレイアウト、主要ライブラリを扱い、プロジェクト構築とモバイルUIの実践に焦点を当てます。

主な機能

  1. 01Expo TypeScriptプロジェクトの作成
  2. 02app.jsonとルーティングの設定
  3. 03ルートレイアウトのプロバイダー設定
  4. 04画像、触覚、安全領域APIの利用
  5. 05ボトムシートとFlashListの導入

活用シーン

  1. 01Expoデモアプリのセットアップ
  2. 02アプリへのExpo Router設定
  3. 03モバイルのシートと長いリストの実装
  4. 04画像キャッシュと触覚フィードバックの追加

インストール

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

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill expo-sdk

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

詳細

Expo SDK

概要

Expo SDK 54+ は、ファイルベースのルーティング（Expo Router）、ネイティブモジュールへのアクセス、効率化されたビルドツールを備えた、マネージド React Native 開発環境を提供します。このスキルでは、アプリの設定、ルートレイアウトのプロバイダーパターン、主要な Expo/RN ライブラリについて説明します。

前提条件：npx create-expo-app を実行するか、package.json で Expo SDK 54+ を使用してください。

ワークフロー

新しい Expo デモのセットアップ：

  1. プロジェクトを作成します：npx create-expo-app [demo-name] --template blank-typescript
  2. コア依存関係をインストールします：pnpm add expo-router expo-image expo-haptics react-native-reanimated react-native-gesture-handler react-native-safe-area-context @gorhom/bottom-sheet @shopify/flash-list lucide-react-native nativewind tailwindcss@3
  3. NativeWind を設定します（nativewind スキルを参照）
  4. プロバイダースタックを使ってルートレイアウトを設定します
  5. app.json で scheme、name、splash を設定します
  6. ルートグループと画面を追加します
  7. 実行します：pnpm start（Expo 開発サーバー）

新しいライブラリの追加：

  1. pnpm でインストールします：pnpm add [library]
  2. app.json で Expo 設定プラグインが必要かどうか確認します
  3. ネイティブモジュールを追加した場合は開発クライアントを再ビルドします：npx expo prebuild

ガイダンス

app.json の設定

デモアプリで重要なフィールド：

フィールド目的
expo.name表示名
expo.slugURL で使用できる識別子
expo.schemeディープリンクのスキーム（例：myapp）
expo.orientationportrait（デモのデフォルト）
expo.splashスプラッシュ画面の設定
expo.ios.bundleIdentifieriOS のバンドル ID
expo.android.packageAndroid のパッケージ名
expo.pluginsExpo 設定プラグイン（例：expo-router）
ルートレイアウトのプロバイダーパターン

ルートの app/_layout.tsx でアプリ全体をプロバイダーでラップします。標準的な順序：

GestureHandlerRootView (flex: 1)
  └── SafeAreaProvider
       └── ThemeProvider / Context
            └── Stack (Expo Router)
  • GestureHandlerRootView は最も外側に配置する必要があります（ジェスチャーハンドラーとボトムシートに必須です）
  • SafeAreaProvider はすべての子孫にセーフエリアのインセットを提供します
  • アプリレベルのコンテキストプロバイダーは SafeAreaProvider と Stack の間に配置します
  • カスタムヘッダーには <Stack screenOptions={{ headerShown: false }} /> を使用します
expo-image（RN Image の代替）

すべての画像描画に expo-image を使用してください。キャッシュ、blurhash プレースホルダー、コンテンツのフィット方法、アニメーション付きトランジションを利用できます。

主なプロパティ：

  • source — URI 文字列、またはローカル画像用の require()
  • placeholder — 読み込み中に表示する blurhash 文字列
  • contentFit — 'cover' | 'contain' | 'fill'
  • transition — フェードインの時間（ミリ秒単位。例：300）
expo-haptics

操作時に触覚フィードバックを提供します：

  • Haptics.selectionAsync() — 選択や切り替え時の軽いタップ
  • Haptics.impactAsync(ImpactFeedbackStyle.Medium) — ボタンの押下やカードのタップ
  • Haptics.notificationAsync(NotificationFeedbackType.Success) — アクションの完了

使いすぎないでください。タッチのたびに触覚フィードバックがあると煩わしくなります。

セーフエリアのインセット

デバイスのノッチ、ステータスバー、ホームインジケーターを考慮します：

  • useSafeAreaInsets() — { top, bottom, left, right } をポイント単位で返します
  • 画面コンテナーに適用します：paddingTop: insets.top
  • NativeWind のクラス：pt-[${insets.top}px] を使うか、SafeAreaView でラップします
@gorhom/bottom-sheet

モバイルのモーダルパターンでは Radix Dialog の代わりに使用します：

  • 詳細表示、選択、フィルター、フォームに使用します
  • スナップポイントを定義します：snapPoints={['25%', '50%', '90%']}
  • 背景：タップして閉じる backdropComponent を指定します
  • シート内のスクロール可能なコンテンツには BottomSheetScrollView を使用します
  • 祖先に GestureHandlerRootView が必要です
FlashList（FlatList の代替）

@shopify/flash-list による高性能なリスト描画：

  • FlatList の置き換えとしてすぐに使えますが、estimatedItemSize プロパティは必須です
  • estimatedItemSize={80} — 各項目の推定高さ（ポイント単位）
  • リサイクルアーキテクチャにより、60fps のスムーズなスクロールを実現します
  • NativeWind のスタイリングには contentContainerClassName を使用します
lucide-react-native

React Native 向けのアイコンライブラリ（Web の lucide-react と同じです）：

  • 個別のアイコンをインポートします：import { Home, Settings, ChevronRight } from 'lucide-react-native'
  • プロパティ：size、color、strokeWidth
  • モバイルと Web のコードベースで一貫したアイコンセットを使用できます
StatusBar

画面ごとにステータスバーの外観を設定します：

  • 明るい背景には <StatusBar style="dark" /> を使用します
  • 暗い背景には <StatusBar style="light" /> を使用します
  • expo-status-bar からインポートします

ベストプラクティス

  • ルートレイアウトを GestureHandlerRootView でラップし、style={{ flex: 1 }} を設定します
  • すべての画像に expo-image を使用します（キャッシュ、blurhash、パフォーマンスのため）
  • ハプティクスは主なアクション（ボタン、大きな選択操作）のみに追加し、タッチ操作のたびには追加しないでください
  • すべての FlashList コンポーネントに estimatedItemSize を設定します
  • プロバイダーは個々の画面ではなく、ルートの _layout.tsx に配置します
  • 手動でパディングを設定する場合は useSafeAreaInsets() を、シンプルにラップする場合は SafeAreaView を使用します
  • ハプティクスとパフォーマンスを検証するため、実機でテストします

アンチパターン

  • expo-image の代わりに React Native の Image を使用する
  • 大規模なデータセットに FlashList ではなく FlatList を使用する
  • GestureHandlerRootView を忘れる（ボトムシートやジェスチャーのクラッシュの原因になります）
  • あらゆる操作でハプティクスを使いすぎる
  • セーフエリアのインセットを使用せず、ステータスバーの高さをハードコードする
  • FlashList に estimatedItemSize を指定しない（必須プロパティであり、コンソールに警告が表示されます）
  • ScrollView の内側に SafeAreaView を配置する（レイアウトの問題の原因になります）
  • app.json の plugins 配列に expo-router プラグインを含めない

コメント

Markdown 対応