Expo Examples
expo/examples は、Expo公式の約70の統合サンプル集です。ディレクトリ名は with-<ライブラリ名>(例:with-stripe、with-maps)で、それぞれが1つのライブラリまたはサービスに特化しています。これらは完全なアプリではなく、管理プロジェクトです(ios//android/ ディレクトリはなく、ネイティブセットアップは設定プラグインで行います)。典型的なサンプルは1画面、約100~200行のコードです。これらのサンプルから、依存関係、app.json の設定プラグイン、現在のSDKに対してExpoが維持している最小限の配線コードという、標準的な統合パターンを抽出し、ユーザーのアプリに適用してください。サンプルからアプリケーションアーキテクチャ全体をそのまま流用することは想定していません。
統合を手動で一から実装する前に、まずサンプルを参照しましょう(種類 — フルスタック、ショーケース、スターター — は ./references/catalog.md に記載されています)。
2つのモード
- インスピレーション / 適用(最も一般的) — ユーザーは既にプロジェクトを持っています。該当するサンプルを見つけ、その主要ファイルを読み、パターンをユーザーのコードに適用します。
- スキャフォールディング — 新規プロジェクト。サンプルから直接新しいプロジェクトを作成します。
ワークフロー
1. 適切なサンプルを見つける
ユーザーのニーズをサンプル名にマッピングします(例:支払い → with-stripe、認証 → with-clerk)。./references/catalog.md は、素早いトリアージのためにカテゴリ別に整理されたスナップショットですが、最新ではない可能性があるため、実際のリストで確認してください:
# 実際のサンプル名一覧:
gh api repos/expo/examples/contents --jq '.[] | select(.type=="dir" and (.name|startswith(".")|not)) | .name'
# エイリアス(リネームされたもの)と非推奨(削除/移動されたもの)のサンプル — 推奨前に確認:
gh api repos/expo/examples/contents/meta.json --jq '.content' | base64 -d
meta.json は、リネームされたサンプルや利用不可能になったサンプルに関する信頼できる情報源です(非推奨のサンプルはリポジトリツリーから削除されていますが、ここには message とともにリストされています)。サンプルが deprecated マップにある場合は推奨せず、message に従って最新のパスを使用してください。aliases にある場合は、destination を使用します。
2a. インスピレーションモード — ユーザーのプロジェクトに触れずに学習する
一般的なケース:ユーザーは既にアプリを持っており、Expoがどのように何かを実装しているかを知りたい場合です。サンプルをリファレンスとして読み、パターンを手動で適用します — 決してユーザーのプロジェクトの上にサンプルをスキャフォールディングしないでください。
まず、サンプル全体を1回の呼び出しで一覧表示します。 統合コードはネストしていることが多いため(例:Stripeのサーバールートは app/api/ にあります)、1レベルの一覧表示では重要なファイルを見逃す可能性があります:
gh api 'repos/expo/examples/git/trees/master?recursive=1' \
--jq '.tree[].path | select(startswith("with-stripe/"))'
次に、シグナルの強いファイルから読み進めます: README.md(セットアップ)→ package.json(依存関係)→ app.json(設定プラグイン/パーミッション)→ マニフェストで明らかになった統合コード → .env(必要なシークレット)。ファイルごとに:
gh api repos/expo/examples/contents/with-stripe/utils/stripe-server.ts --jq '.content' | base64 -d
# ghがない場合?RAW URL(ブランチはmaster):
curl -s https://raw.githubusercontent.com/expo/examples/master/with-stripe/utils/stripe-server.ts
数ファイル以上読む必要がありますか? 多くの統合はサーバールート、クライアントプロバイダー、設定(Stripeがそう)に分散しています。ファイルごとの呼び出しはスキップして、サンプル全体を使い捨て/gitignoredディレクトリ(ユーザーのプロジェクト外) にプルし、Grep/Readで自由に読み込んでから手動で適用してください:
npx degit expo/examples/with-stripe /tmp/expo-ref/with-stripe # クリーンコピー、git履歴なし
# degitがない場合の代替(sparse-checkout、完全な約64MBのクローンは行わない):
git clone --depth 1 --filter=blob:none --sparse https://github.com/expo/examples.git /tmp/expo-ref/examples \
&& (cd /tmp/expo-ref/examples && git sparse-checkout set with-stripe)
そこからGrep/Readで読み込み、完了したらスクラッチディレクトリを削除します。
2b. スキャフォールディングモード — サンプルから新規プロジェクトを作成する
npx create-expo --example with-stripe # 短縮形: npx create-expo -e with-stripe
bun create expo --example with-stripe # bunの場合
3. ユーザーのアプリに適用する — 非破壊的に(重要)
ユーザーが既にアプリを持っている場合、サンプルが導入するものだけを追加し、決して既存のセットアップを上書きしないでください。
- バージョンを整合させる — 固定バージョンをコピーしないこと。 サンプルは最新のSDKを追跡しているため、それらの
package.jsonの固定バージョンは古いプロジェクトと一致しません。不足している依存関係はnpx expo install <pkg>(SDKに適したバージョンを解決します)でのみ追加し、正確なバージョンをコピーしないでください。 - 設定をマージし、置き換えないこと。 ユーザーが欠いている、サンプルが導入する
app.json/app.config.*のプラグインとパーミッションのみを追加し、既存の設定ブロックはそのまま維持します。 - 統合コードを移植します。
- サンプルの
.envの形式に従って環境変数を再作成します。 サンプルにはプレースホルダーが含まれており、実際のシークレットは含まれていません。
完了条件 は、統合コードが移植され、必要なすべての依存関係、設定プラグイン、パーミッション、環境変数がユーザーのアプリに組み込まれたときです — 単に配線されたように見えるだけでは不十分です。
注意点
- デフォルトブランチは
masterであり、mainではありません(RAW URLやsparse checkoutに影響します)。 - ワンクリックデプロイ。 すべてのサンプルには起動URLがあります:
https://launch.expo.dev/?github=https://github.com/expo/examples/tree/master/<サンプル名>。
関連スキル
- ネイティブUIコンポーネント(@expo/ui パッケージ)→
expo-ui - スタイリングとネイティブ感のある画面 →
expo-native-ui - ナビゲーションとルーティング →
expo-router - ネイティブモジュールの作成 →
expo-module - 最新SDKのサンプルを採用する前にSDKをアップグレード →
expo-upgrade
参考文献
./references/catalog.md— サンプルライブラリのカテゴリ別スナップショット。素早いトリアージに使用します。
フィードバックの送信
エラー、誤解を招く情報、またはこのスキルの古い情報を見つけた場合は、Expoが改善できるよう報告してください:
npx --yes submit-expo-feedback@latest --category skills --subject "expo-examples" "<具体的で実行可能なフィードバック>"
報告するのは、具体的で実行可能な内容がある場合のみにしてください。可能な限り多くの関連コンテキストを含めてください。 AIエージェントが繰り返し失敗した場合、またはユーザーがExpoのタスクを引き継がなければならなかった場合は、上記のコマンドを再利用する代わりに、expo-skill-feedbackスキルをロードし、そのeval-candidateフローに従ってください。