← Expo2CONTENT HISTORY

Update to Expo2

Snapshot Nov 6, 2026 · 18:22 UTC · version 1.14.6

Collection source: downloaded plugin package.

WHAT CHANGED

First saved snapshot

No earlier snapshot is available to establish a change.

Save Expo2 and check future changes in Following.

Up to 3 plugins free · no card required.

Compare saved observations

Download comparison JSON
Full technical diff · 0 changed fields
Full snapshot data
{
  "description": "Folder structure for a new Expo app. Use when scaffolding or laying out a new Expo project with Expo Router, or deciding where a file should live in one. For new projects only — never restructure an existing app to match.",
  "included_files": [
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 316
    }
  ],
  "name": "expo-project-structure",
  "skill_md_contents": "---\nname: expo-project-structure\ndescription: Folder structure for a new Expo app. Use when scaffolding or laying out a new Expo project with Expo Router, or deciding where a file should live in one. For new projects only — never restructure an existing app to match.\nlicense: MIT\n---\n\n# Expo Project Structure\n\nA starting skeleton for a **new** Expo app — one with no committed folder structure yet.\n\n**Apply only to new projects.** If the app already has a layout, follow its existing conventions and leave files where they are — a default to start from, never a standard to enforce or migrate toward. When unsure whether a project is new, ask before moving anything.\n\nThe whole layout, assembled from the rules below:\n\n```\n├── assets/\n├── scripts/\n├── src/\n│   ├── app/                       # Expo Router routes ONLY — every file is a route\n│   │   ├── api/                   #   server API routes, grouped here\n│   │   │   ├── user+api.ts\n│   │   │   └── settings+api.ts\n│   │   ├── _layout.tsx\n│   │   ├── _layout.web.tsx         #   platform-specific layout\n│   │   ├── index.tsx\n│   │   └── settings.tsx\n│   ├── components/                 # reusable UI: button, card, table…\n│   │   ├── table/                  #   complex component → folder + index.tsx\n│   │   │   ├── cell.tsx\n│   │   │   └── index.tsx\n│   │   ├── bar-chart.tsx\n│   │   ├── bar-chart.web.tsx        #   platform-specific variant\n│   │   └── button.tsx\n│   ├── screens/                    # screen bodies that route files render\n│   │   ├── home/\n│   │   │   ├── card.tsx            #   used only by Home — not shared\n│   │   │   └── index.tsx           #   rendered by src/app/index.tsx\n│   │   └── settings.tsx\n│   ├── server/                     # server-only helpers used by app/api\n│   │   ├── auth.ts\n│   │   └── db.ts\n│   ├── utils/                      # standalone helpers + colocated tests\n│   │   ├── format-date.ts\n│   │   └── format-date.test.ts\n│   ├── hooks/                      # reusable hooks: use-theme.ts…\n│   ├── constants.ts\n│   └── theme.ts\n├── app.json\n├── eas.json\n└── package.json\n```\n\n## `src/` and `src/app`\n\nKeep app code under `src/` to separate it from config files. Expo Router supports both `app/` and `src/app/` out of the box — to switch, move the folder and restart the bundler. The default template aliases `@/*` to `./src/*` in `tsconfig.json`.\n\n`src/app` is **routes-only**: every file there becomes a route, so nothing else belongs in it. Everything below lives in sibling folders.\n\n## components/ — reusable UI\n\nGeneric, reused UI (button, card, table) with one named export each. Name files in **kebab-case** (`bar-chart.tsx`), matching the default `create-expo-app` template. When a component grows, give it its own folder with the root in `index.tsx` and **colocate** its private sub-components beside it — the import path (`@/components/table`) stays unchanged.\n\n## screens/ — screen bodies\n\nBecause `app/` files must be routes, complex screen UI that isn't reused has no home there. Once a screen grows big enough to need breaking out to separate components, put it in `screens/` and let each route just render its screen:\n\n```tsx\nimport { Home } from \"@/screens/home\";\n\nexport default function HomeScreen() {\n  // route-specific concerns only — e.g. read url params here\n  return <Home />;\n}\n```\n\n**Colocate** a screen's private components inside its folder (`screens/home/components/`). A bonus: the same screen can render under multiple routes.\n\n## server/ + app/api/ — separate server code\n\nAppending `+api` to a file in `app/` makes it a server **API route**. Server code is different from frontend code — it runs in a Node-like server environment (deployed with EAS Hosting or on [third-party services](https://docs.expo.dev/router/web/api-routes/#hosting-on-third-party-services)) and can read secret env vars (`process.env.X`, not just `EXPO_PUBLIC_*`). Keep it apart:\n\n- Group all routes under `app/api/` → `/api/user`, `/api/settings`. This colocates them and avoids collisions (e.g. a `/user` screen and a `/user` route).\n- Put shared server-only helpers in `src/server/`.\n- Consider ESLint rules that fence `+api` files and `server/` off from frontend-only checks.\n\n## Platform-specific code\n\nSmall differences: use `Platform.select` / `Platform.OS`. For larger ones, split into platform files instead of inline `if/else` — `bar-chart.tsx` + `bar-chart.web.tsx`, imported extension-free (`@/components/bar-chart`); Metro picks the right file per target.\n\n- Props must be identical across variants.\n- A default file (no platform extension) is always required — make it a no-op if the component is single-platform.\n- Supported extensions: `.ios`, `.android`, `.native`, `.web`.\n\n## Colocate styles and tests\n\n- **Styles:** keep the `StyleSheet.create({ ... })` object at the bottom of the component file rather than in a separate `.styles` file.\n- **Tests:** put `format-date.test.ts` next to `format-date.ts` (preferred over a separate `__tests__/` folder) so tested files are obvious at a glance.\n\n## AI and config files\n\nAgent instructions live at the repo root — `AGENTS.md` / `CLAUDE.md`, with project skills under `.claude/`. Other config and assets stay outside `src/`: `app.json` / `app.config.ts`, `eas.json`, `package.json`, `assets/`, and `scripts/`.\n\n---\n\nBased on [Expo app folder structure best practices](https://expo.dev/blog/expo-app-folder-structure-best-practices) by Kadi Kraman. For `src/` precedence and alias mechanics, see the [Expo docs](https://docs.expo.dev/router/reference/src-directory/).\n\n## Submitting Feedback\nWhen the user requests feedback submission, use:\n```bash\nnpx --yes @expo/agent-cli@1.0.23 feedback --category skills --subject \"expo-project-structure\" \"<actionable feedback>\"\n```\nInclude only relevant technical details; keep credentials, private data, and conversation contents out of feedback.\n"
}

SHA-256 of public snapshot: e813bf96990ec0d32fb1f29f08cb1ccfaccdd51aa44a1fedaaf4a35ba7737b35