# SkillPatch skill: expo-examples

This skill guides an agent in finding, reading, and applying Expo's official example projects (~70 `with-*` integrations) to either inspire/adapt third-party library integrations into an existing Expo app or scaffold new projects. It provides structured workflows for locating the right example, reading key files via GitHub API or raw URLs, and safely referencing patterns without disrupting the user's existing project. It covers integrations like Stripe, Clerk, Supabase, OpenAI, maps, Reanimated, SQLite, Skia, NativeWind, and more.

You (the agent) were given this URL and asked to use this skill. This is a **public** skill — no SkillPatch account, API key, or prior setup is required. Two ways to use it:

**1. Use it right now** — the skill's complete file tree (SKILL.md + all reference files) is inlined below; read `SKILL.md` first, then follow it, consulting the other files as it directs.

**2. Install the exact package onto disk** (recommended if you can run a shell — this reproduces the skill byte-for-byte, including any binary assets that can't be inlined):

```bash
mkdir -p .claude/skills/expo-examples
curl -sSL https://skillpatch.dev/install_skill/expo-examples | tar -xz -C .claude/skills/
```

(`.claude/skills/` is Claude Code's convention; use whatever directory your agent loads skills from.)


---

## Skill files (2)

- `SKILL.md`
- `references/catalog.md`


### `SKILL.md`

````markdown
---
name: expo-examples
description: 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`.
allowed-tools: "Read,Bash(gh api:*),Bash(git clone:*),Bash(npx create-expo:*),Bash(npx degit:*),Bash(bun create:*)"
version: 1.0.0
license: MIT
---

# Expo Examples

[expo/examples](https://github.com/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:

```bash
# 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:

```bash
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:

```bash
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:

```bash
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

```bash
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

- Tailwind / NativeWind styling → `expo-tailwind-setup`
- Native UI components → `building-native-ui`
- Authoring a native module → `expo-module`
- Upgrade the SDK before adopting a latest-SDK example → `upgrading-expo`

## References

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

````


### `references/catalog.md`

```markdown
# Example catalog (snapshot)

A categorized view of [expo/examples](https://github.com/expo/examples) for fast triage. Each entry is a **single-concern integration demo** (one library/service, managed project, usually one screen) — not a full app. This snapshot drifts — the **live repo is the source of truth**. Confirm the exact name against `gh api repos/expo/examples/contents` and check `meta.json` for aliases/deprecations (see SKILL.md step 1) before recommending or scaffolding.

Use any name with `npx create-expo --example <name>` (scaffold) or inspect it via `gh api repos/expo/examples/contents/<name>/<file>`.

Most are single-screen integrations; a few differ:

- **Full-stack** (include Expo Router `+api` routes — a backend too): `with-stripe`, `with-clerk`, `with-better-auth`, `with-openai`, `with-router-ai`, `with-graphql`, `with-s3`, `with-satori`.
- **Larger showcases:** `with-shadcn`, `with-router-tv`, `with-router-menus`, `with-react-navigation`, `with-webgpu`.
- **Starters (not integrations):** `blank`, `stickersmash`.

## Auth & identity
- `with-clerk` — Clerk authentication
- `with-auth0` — Auth0 login
- `with-better-auth` — Better Auth
- `with-magic` — Magic passwordless auth
- `with-facebook-auth` — Facebook login
- `with-firebase-saml-login` — Firebase SAML SSO

## Payments
- `with-stripe` — Stripe payments (native + web)

## Backend, data & storage
- `with-convex` — Convex realtime backend
- `with-legend-state-supabase` — Supabase + Legend-State sync
- `with-firebase-storage-upload` — Firebase Storage uploads
- `with-aws-storage-upload`, `with-s3` — AWS / S3 file uploads
- `with-apollo`, `with-graphql` — GraphQL clients
- `with-formdata-image-upload` — multipart image upload

## Local database & state
- `with-sqlite` — expo-sqlite
- `with-libsql` — libSQL / Turso
- `with-tinybase` — TinyBase local-first store
- `with-zustand` — Zustand state management

## Navigation & routing
- `with-router` — Expo Router basics
- `with-react-navigation` — React Navigation (stacks + tabs)
- `with-drawer-navigation` — drawer navigator
- `with-router-menus` — native context menus with Router
- `with-router-uniwind` — Router + Uniwind styling
- `with-router-ai` — Router + AI chat UI
- `with-router-tv` — Router on TV
- `with-react-router` — React Router (web)

## Styling & UI
- `with-tailwindcss` — Tailwind / NativeWind (see also `expo-tailwind-setup` skill)
- `with-styled-components` — styled-components
- `with-shadcn` — shadcn-style components
- `with-moti` — Moti animations
- `with-custom-font` — custom fonts
- `with-svg` — react-native-svg
- `with-icons` — icon sets
- `with-splash-screen` — custom splash screen
- `with-video-background` — full-screen video background

## Animation & graphics
- `with-reanimated` — Reanimated
- `with-skia` — React Native Skia 2D graphics
- `with-three`, `with-react-three-fiber` — three.js / R3F 3D
- `with-webgpu` — WebGPU
- `with-processing` — Processing-style sketches
- `with-react-flow` — node/flow diagrams
- `with-victory-native` — charts

## AI & ML
- `with-openai` — OpenAI API
- `with-router-ai` — AI chat app with Expo Router
- `with-google-vision` — Google Cloud Vision
- `with-tfjs-camera` — TensorFlow.js on the camera

## Media & device
- `with-camera` — expo-camera
- `with-maps` — react-native-maps
- `with-webrtc` — WebRTC
- `with-pdf` — render / view PDFs

## Web & rendering
- `with-nextjs` — Next.js + Expo
- `with-rsc` — React Server Components
- `with-react-strict-dom` — React Strict DOM
- `with-react-compiler` — React Compiler
- `with-html` — render raw HTML
- `with-satori` — OG image generation with Satori
- `with-workbox` — service worker / PWA
- `with-webbrowser-redirect` — expo-web-browser auth redirect

## Platform: TV, widgets
- `with-tv` — Apple TV / Android TV
- `with-widgets` — iOS / Android home-screen widgets

## Tooling, testing & monorepo
- `with-typescript` — TypeScript baseline
- `with-yarn-workspaces` — Yarn monorepo
- `with-storybook` — Storybook
- `with-maestro` — Maestro E2E tests
- `with-sentry` — Sentry error monitoring
- `with-socket-io` — Socket.IO realtime
- `with-github-remote-build-cache-provider` — remote build cache on GitHub

## Starters
- `blank` — minimal app
- `stickersmash` — the tutorial app

```