• Projects
  • Service
  • About
  • branding.bz
  • Podcast
  • Tips
  • FAQ
  • Recruit
  • Download
  • Contact
  • branding.bz(ブランド構築SaaS)
  • DESIGN NOW(デザインメディア)
  • X
  • LinkedIn
  • Spotify
  • Facebook

213-0011 神奈川県川崎市高津区久本3-6-7-303

© 2026 ID INC. All rights reserved

claude-skills/スキル
SKILLOfficialdevelopment

expo-examples

プラグイン
expo
ライセンス
MIT
ソース
GitHub で見る ↗
説明

フレームワーク(オープンソースソフトウェア)。Expoの公式サンプルプロジェクト集です。expo/examplesリポジトリには、約70個の「with-*」統合例(Stripe、Clerk、Supabase、OpenAI、地図、Reanimated、SQLite、Skia、NativeWindなど)が収録されています。 **次のような場合に使用:** - 既存のExpoアプリにサードパーティ製のライブラリやサービスを組み込む際に、推奨される標準的なやり方を参考にしたい場合 - バージョンが合致したパターンを新しいプロジェクトに適用したい場合 - `npx create-expo --example` コマンドを使ってサンプルプロジェクトから新規プロジェクトを作成する場合

原文を表示

Framework (OSS). Expo's official example projects - the expo/examples repo of ~70 `with-*` integrations (Stripe, Clerk, Supabase, OpenAI, maps, Reanimated, SQLite, Skia, NativeWind, and more). Use when integrating a third-party library or service into an existing Expo app and you want the canonical, version-matched pattern to adapt, or when scaffolding a new project from one with `npx create-expo --example`.

ユースケース
  • Expoアプリにサードパーティ製ライブラリを組み込む
  • 推奨される統合方法を参考にしたい
  • バージョン合致パターンを新規プロジェクトに適用
  • サンプルプロジェクトから新規作成するとき
本文(日本語訳)

Expo 例

expo/examples は Expo 公式の約70個の統合例(with-<ライブラリ> という形式のディレクトリ、例えば with-stripe、with-maps)をまとめたライブラリです。各例はひとつのライブラリやサービスに焦点を当てています。

これらは完成されたアプリではなく、マネージド型プロジェクト(ios/・android/ ディレクトリなし——ネイティブ設定は config プラグインで行う)であり、典型的には100~200行程度の単一画面です。

これらから得られるのは、統合の標準的なパターン——依存ライブラリのセット、app.json の config プラグイン、Expo が最新 SDK に対して保守している最小限の配線です。このパターンをあなたのアプリに合わせて応用してください。アプリケーションの全体的な構造をそのまま流用することは想定していません。

統合を自分で一から作る前に、まずこれらの例を参考にしてください。(例の種類——フルスタック、ショーケース、スターターなど——は ./references/catalog.md に記載されています)

2つの使用パターン

  1. 参考にして応用する(最も一般的)——ユーザーがすでにプロジェクトを持っている場合。合致する例を探し、重要なファイルを読み、パターンを自分のコードに適用します。
  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 は改名や廃止状況の公式情報源です。廃止予定の例は deprecated マップに記載されており、各エントリには最新のパス(message)が記載されています。そこにあれば推奨せず、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(config プラグイン・パーミッション)→ マニフェストで示された統合コード → .env(必要なシークレット)。ファイルごとに:

gh api repos/expo/examples/contents/with-stripe/utils/stripe-server.ts --jq '.content' | base64 -d
# gh がない場合は生の URL を使用(ブランチは master):
curl -s https://raw.githubusercontent.com/expo/examples/master/with-stripe/utils/stripe-server.ts

複数のファイルを読む必要がありますか? 多くの統合はサーバールート、クライアントプロバイダー、設定にまたがっています(Stripe もそうです)。ファイルごとの呼び出しをスキップして、例全体を一時ディレクトリ(ユーザーのプロジェクトではなく)に落とし、Git 無視ディレクトリに置いて、自由に読んでから手作業で適用します:

npx degit expo/examples/with-stripe /tmp/expo-ref/with-stripe   # Git 履歴なしの完全なコピー
# degit がない場合の代替手段(スパースチェックアウト、約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・読み込み機能で読み進め、完了したらスクラッチディレクトリを削除します。

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.* から、例が導入しており、ユーザーのアプリにはまだない config プラグインやパーミッションだけを追加してください。ユーザーの既存の config ブロックはそのまま保持します。
  • 統合コードを移植する。
  • 環境変数を再作成する——例の .env には プレースホルダーが入っていて、本物のシークレットは含まれていません。

完成は、 統合コードが移植され、それに必要なすべての依存ライブラリ、config プラグイン、パーミッション、環境変数がユーザーのアプリに揃ったときです——単に見た目が配線されているだけでは不十分です。

よくある落とし穴

  • デフォルトブランチは master で、main ではありません(生の URL やスパースチェックアウトに影響します)。
  • ワンクリックデプロイ。 すべての例にはローンチ URL があります:https://launch.expo.dev/?github=https://github.com/expo/examples/tree/master/<example>

関連スキル

  • ネイティブ 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 フローに従ってください。

原文(English)を表示

Expo Examples

expo/examples is Expo's official library of ~70 integration examples — directories named with-<library> (e.g. with-stripe, with-maps), each built around one library or service. These are not full apps: they're managed projects (no ios//android/ dirs — native setup is via config plugins), and the typical one is a single screen of ~100–200 lines. Mine them for the canonical integration pattern — the dependency set, app.json config plugins, and minimal wiring Expo maintains against the current SDK — and adapt that into the user's app. Don't expect to lift an application architecture from them.

Reach for an example before hand-rolling an integration. (Kinds — full-stack, showcases, starters — are noted in ./references/catalog.md.)

Two modes

  1. Inspiration / adapt (most common) — the user already has a project. Find the matching example, read its key files, and apply the pattern to their code.
  2. Scaffold — greenfield. Start a fresh project directly from the example.

Workflow

1. Find the right example

Map the user's need to an example name (e.g. payments → with-stripe, auth → with-clerk). ./references/catalog.md is a categorized snapshot for fast triage — but it drifts, so confirm against the live list:

# Live example names:
gh api repos/expo/examples/contents --jq '.[] | select(.type=="dir" and (.name|startswith(".")|not)) | .name'
# Aliases (renamed) + deprecated (dead/moved) examples — check before recommending:
gh api repos/expo/examples/contents/meta.json --jq '.content' | base64 -d

meta.json is the source of truth for what's renamed or dead (deprecated examples are removed from the repo tree but still listed here, each with a message). If an example is in its deprecated map, don't recommend it — follow the message to the modern path. If it's in aliases, use the destination.

2a. Inspiration mode — study without touching the user's project

The common case: the user already has an app and wants to see how Expo does something. Read the example as reference and apply the patterns by hand — never scaffold an example on top of their project.

First, list the whole example in one call. Integration code is often nested (e.g. Stripe's server routes live in app/api/), so a one-level listing misses the important files:

gh api 'repos/expo/examples/git/trees/master?recursive=1' \
  --jq '.tree[].path | select(startswith("with-stripe/"))'

Then read the high-signal files first: README.md (setup) → package.json (deps) → app.json (config plugins / permissions) → the integration code the manifest revealed → .env (required secrets). Per file:

gh api repos/expo/examples/contents/with-stripe/utils/stripe-server.ts --jq '.content' | base64 -d
# No gh? Raw URL (branch is master):
curl -s https://raw.githubusercontent.com/expo/examples/master/with-stripe/utils/stripe-server.ts

Reading more than a couple of files? Many integrations are spread across server routes, a client provider, and config (Stripe is). Skip the per-file calls — pull the whole example into a throwaway/gitignored dir (not the user's project) and read it freely with Grep/Read, then apply by hand:

npx degit expo/examples/with-stripe /tmp/expo-ref/with-stripe   # clean copy, no git history
# fallback without degit (sparse-checkout, no full ~64 MB clone):
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)

Read from there with Grep/Read; delete the scratch dir when done.

2b. Scaffold mode — new project from an example

npx create-expo --example with-stripe   # short form:  npx create-expo -e with-stripe
bun create expo --example with-stripe    # with bun

3. Adapt into the user's app — non-destructively (critical)

When the user already has an app, add only what the example introduces; never overwrite their setup.

  • Version-align — don't copy pinned versions. Examples track the latest SDK, so their package.json pins won't match an older project. Add only the missing deps with npx expo install <pkg> (it resolves SDK-correct versions) instead of copying exact versions.
  • Merge config, don't replace it. Add only the app.json/app.config.* plugins and permissions the example introduces that the user lacks — keep their existing config block intact.
  • Port the integration code.
  • Recreate env vars from the example's .env shape — it holds placeholders, never working secrets.

Done when the integration code is ported and every dependency, config plugin, permission, and env var it needs is accounted for in the user's app — not when it merely looks wired up.

Gotchas

  • Default branch is master, not main (matters for raw URLs and sparse checkout).
  • Single-click deploy. Every example has a launch URL: https://launch.expo.dev/?github=https://github.com/expo/examples/tree/master/<example>.

Related skills

  • Native UI components (@expo/ui package) → expo-ui
  • Styling and native-feeling screens → expo-native-ui
  • Navigation and routing → expo-router
  • Authoring a native module → expo-module
  • Upgrade the SDK before adopting a latest-SDK example → expo-upgrade

References

  • ./references/catalog.md — categorized snapshot of the example library for fast triage.

Submitting Feedback

If you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:

npx --yes submit-expo-feedback@latest --category skills --subject "expo-examples" "<actionable feedback>"

Only submit when you have something specific and actionable to report. Include as much relevant context as possible. If an AI agent repeatedly failed or the user had to take over an Expo task, load the expo-skill-feedback skill and follow its eval-candidate flow instead of reusing the command above.

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。