Communityコーディング&開発github.com

expo/expo-examples

フレームワーク(OSS)。Expo公式のサンプルプロジェクト集(Stripe、Clerk、Supabase、OpenAI、マップ、Reanimated、SQLite、Skia、NativeWindなど約70の `with-*` 統合例)。既存のExpoアプリにサードパーティ製ライブラリやサービスを統合する際に、公式のバージョン対応済みパターンを参照して適用したい場合や、`npx create-expo --example` で新しいプロジェクトをスキャフォールディングする場合に使用します。

expo-examples とは?

`expo/examples` は、Expoが公式に提供する約70の統合サンプルリポジトリで、各サンプルは `with-stripe` や `with-clerk` のように1つのライブラリまたはサービスに焦点を当てています。これらのサンプルは完全なアプリではなく、単一画面(約100~200行)の管理プロジェクトであり、`ios/` や `android/` ディレクトリはなく、ネイティブ設定は設定プラグインで行われます。主な利用方法は、既存のプロジェクトに統合パターン(依存関係、`app.json` の設定プラグイン、最小限の配線コード)を参考として適用する「インスピレーションモード」と、`npx create-expo --example` で新規プロジェクトをスキャフォールディングする2つです。このスキルは、そのサンプル群を効率的に検索・読み込み・適用するためのワークフローを提供し、バージョンの整合性や既存設定の上書き防止など、安全な統合に役立つ注意点もカバーします。主にClaude CodeなどのAIエージェントが、ユーザーのExpoプロジェクトに新しいライブラリを統合する際に、公式の最新パターンを参照するために使用します。

対応~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-examples

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

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. インスピレーション / 適用(最も一般的) — ユーザーは既にプロジェクトを持っています。該当するサンプルを見つけ、その主要ファイルを読み、パターンをユーザーのコードに適用します。
  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フローに従ってください。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

expo/add-app-clip

Add an iOS App Clip target to an Expo app. Use when the user mentions App Clip, AASA, apple-app-site-association, appclips, smart app banner, or wants to ship a lightweight iOS Clip invoked from a URL alongside their parent app.

expo/building-native-ui

Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

expo/eas-update-insights

Check the health of published EAS Updates: crash rates, install/launch counts, unique users, payload size, and the split between embedded and OTA users per channel. Use when the user asks how an update is performing, whether a rollout is healthy, how many users are on the embedded build vs OTA, or wants to gate CI on update health.

expo/expo-api-routes

Guidelines for creating API routes in Expo Router with EAS Hosting

expo/expo-brownfield

Integrate Expo and React Native into an existing native iOS or Android app. Use when the user mentions brownfield, embedding React Native in a native app, AAR/XCFramework, or adding Expo to an existing Kotlin/Swift project. Covers both the isolated approach and the integrated approach.

expo/expo-cicd-workflows

Helps understand and write EAS workflow YAML files for Expo projects. Use this skill when the user asks about CI/CD or workflows in an Expo or EAS context, mentions .eas/workflows/, or wants help with EAS build pipelines or deployment automation.

expo/expo-deployment

Deploying Expo apps to iOS App Store, Android Play Store, web hosting, and API routes

expo/expo-dev-client

Build and distribute Expo development clients locally or via TestFlight

expo/expo-module

Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript). Covers module definition DSL, native views, shared objects, config plugins, lifecycle hooks, autolinking, and type system. Use when building or modifying native modules for Expo.

expo/expo-observe

Use for anything related to EAS Observe — adding `expo-observe` to an Expo project (AppMetricsRoot/ObserveRoot HOC, markInteractive, the useObserve hook, and the Expo Router / React Navigation integrations for per-route metrics), querying via the EAS CLI (`eas observe:metrics-summary`, `observe:metrics`, `observe:routes`, `observe:events`, `observe:versions`), or interpreting the resulting metrics (cold/warm launch, TTR, TTI, navigation cold/warm TTR, update download, and the TTI frameRate params for triaging slow startups).

expo/expo-overview

Framework (OSS). Entry point and router for every Expo or EAS task. Load this skill first — before writing code and before choosing another expo-* / eas-* skill — when the request, PRD, or spec mentions Expo, EAS, Expo Go, or an expo-* package, or the project has an `expo` dependency in `package.json`. Within that gate it also covers app specs and designs to implement (tabs, stacks, maps, lists, navigation, building from a screenshot), and phrasings like 'implement a mobile app', 'make my app look native', 'add navigation', 'fetch some data', 'upgrade my SDK', 'add Expo to my existing native app', 'ship to the App Store', or 'I'm new to Expo, where do I start'. A fully specified request (SDK pinned, libraries named, layout given) still routes through here — the shared setup rules still apply. Do NOT load it when neither signal is present: a bare React Native project with no `expo` dependency is not Expo work. Detects the real goal, routes to the right expo-* / eas-* skill, and owns the shared setup rules.

expo/expo-router

Framework (OSS). Navigation and routing for Expo Router. Covers file-based routes, groups and dynamic routes, folder organization, Link with previews and context menus, native Stack, page titles, modals and form sheets, NativeTabs, headers and toolbars, and header search bars.

expo/expo-skill-eval

Evaluate Expo skills in this repo end-to-end - trigger accuracy, generated code quality, and runtime screenshots on iOS simulator and Android emulator via Expo Go (web optional). Use when the user wants to eval an Expo skill, test that a skill produces working code, benchmark a skill with device screenshots, or verify a skill's output renders correctly.

expo/expo-tailwind-setup

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

expo/expo-ui

Framework (OSS). Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android. Default to @expo/ui for sheets (BottomSheet), pickers, sliders, toggles, menus, and grouped-form sections — do NOT reach for Reanimated, @gorhom/bottom-sheet, or RN built-in Picker/Switch; use @expo/ui instead. Fall back to RN built-ins only when @expo/ui is missing the component. NOTE: @expo/ui List renders native grouped rows like an iOS Settings screen — it is NOT a virtualized list; use FlatList/FlashList for large datasets. Covers universal components (Host, Column, Row, Button, Text, List, BottomSheet, FieldGroup, Switch, Slider, Picker, Menu), drop-in replacements for RN community libraries, and platform-specific SwiftUI/Jetpack Compose trees. Not for Expo Router navigation, Reanimated, or data fetching.

expo/expo-ui-jetpack-compose

`@expo/ui/jetpack-compose` package lets you use Jetpack Compose Views and modifiers in your app.

expo/expo-ui-swiftui

`@expo/ui/swift-ui` package lets you use SwiftUI Views and modifiers in your app.

expo/expo-upgrade

Framework (OSS). Guidelines for upgrading Expo SDK versions and fixing dependency issues

expo/native-data-fetching

Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (`useLoaderData`).

expo/skills

Build and submit iOS and Android apps with EAS to TestFlight, the App Store, or Google Play. Supports Expo and other React Native projects, plus existing native apps. Use for eas.json setup, release pipelines, signing, app versions and build numbers, store submissions, and listing metadata. For Expo websites and API routes, use eas-hosting; for adding React Native screens to a native app, use expo-brownfield.

関連スキル