React Native Best Practices
vercel-labs/openreview
A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration.
Folder structure for a new Expo app. An agent skill from expo/skills.
$ npx skills add expo/skills --skill expo-project-structure -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install expo/skills expo-project-structure --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/expo/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/expo/skills/expo-project-structure .claude/skills/expo-project-structure && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "expo-project-structure" agent skill from https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-project-structure into .claude/skills/expo-project-structure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "expo-project-structure", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-project-structureType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add expo/skills --skill expo-project-structure -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install expo/skills expo-project-structure --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/expo/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/expo/skills/expo-project-structure .agents/skills/expo-project-structure && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "expo-project-structure" agent skill from https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-project-structure into .agents/skills/expo-project-structure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "expo-project-structure", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add expo/skills --skill expo-project-structure -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install expo/skills expo-project-structure --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/expo/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/expo/skills/expo-project-structure .cursor/skills/expo-project-structure && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "expo-project-structure" agent skill from https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-project-structure into .cursor/skills/expo-project-structure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "expo-project-structure", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/expo/skills.git --path plugins/expo/skills/expo-project-structure--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add expo/skills --skill expo-project-structure -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install expo/skills expo-project-structure --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/expo/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/expo/skills/expo-project-structure .gemini/skills/expo-project-structure && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "expo-project-structure" agent skill from https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-project-structure into .gemini/skills/expo-project-structure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "expo-project-structure", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install expo/skills expo-project-structureInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add expo/skills --skill expo-project-structure -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/expo/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/expo/skills/expo-project-structure .github/skills/expo-project-structure && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "expo-project-structure" agent skill from https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-project-structure into .github/skills/expo-project-structure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "expo-project-structure", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add expo/skills --skill expo-project-structure -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install expo/skills expo-project-structure --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/expo/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/expo/skills/expo-project-structure .opencode/skills/expo-project-structure && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "expo-project-structure" agent skill from https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-project-structure into .opencode/skills/expo-project-structure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "expo-project-structure", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
expo-project-structureFolder structure for a new Expo app. An agent skill from expo/skills.
Expo Project Structure is an agent skill from expo/skills, published by the product's own GitHub organization. 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.
Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).
It sits in Mobile, covering Cross-platform mobile apps and File organization. It works with Expo. The repository describes itself as: A collection of AI agent skills for working with Expo projects and Expo Application Services. The licence is MIT.
Read from SKILL.md and the folder at commit d4f4840. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
npxFrom the folder's file list and the shell code blocks in SKILL.md.
Links to these hosts (documentation or services it may open):
docs.expo.devexpo.devFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Expo Project Structure loads about 1.5k tokens when it runs. Until then it costs about 61 tokens; SKILL.md has 566 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from expo/skills at commit d4f4840, republished under its MIT licence (© expo). 566 words, ~1,532 tokens.
.claude/skills/expo-project-structure/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.A starting skeleton for a new Expo app — one with no committed folder structure yet.
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.
The whole layout, assembled from the rules below:
├── assets/
├── scripts/
├── src/
│ ├── app/ # Expo Router routes ONLY — every file is a route
│ │ ├── api/ # server API routes, grouped here
│ │ │ ├── user+api.ts
│ │ │ └── settings+api.ts
│ │ ├── _layout.tsx
│ │ ├── _layout.web.tsx # platform-specific layout
│ │ ├── index.tsx
│ │ └── settings.tsx
│ ├── components/ # reusable UI: button, card, table…
│ │ ├── table/ # complex component → folder + index.tsx
│ │ │ ├── cell.tsx
│ │ │ └── index.tsx
│ │ ├── bar-chart.tsx
│ │ ├── bar-chart.web.tsx # platform-specific variant
│ │ └── button.tsx
│ ├── screens/ # screen bodies that route files render
│ │ ├── home/
│ │ │ ├── card.tsx # used only by Home — not shared
│ │ │ └── index.tsx # rendered by src/app/index.tsx
│ │ └── settings.tsx
│ ├── server/ # server-only helpers used by app/api
│ │ ├── auth.ts
│ │ └── db.ts
│ ├── utils/ # standalone helpers + colocated tests
│ │ ├── format-date.ts
│ │ └── format-date.test.ts
│ ├── hooks/ # reusable hooks: use-theme.ts…
│ ├── constants.ts
│ └── theme.ts
├── app.json
├── eas.json
└── package.jsonsrc/ and src/appKeep 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.
src/app is routes-only: every file there becomes a route, so nothing else belongs in it. Everything below lives in sibling folders.
Generic, 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.
Because 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:
import { Home } from "@/screens/home";
export default function HomeScreen() {
// route-specific concerns only — e.g. read url params here
return <Home />;
}Colocate a screen's private components inside its folder (screens/home/components/). A bonus: the same screen can render under multiple routes.
Appending +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) and can read secret env vars (process.env.X, not just EXPO_PUBLIC_*). Keep it apart:
app/api/ → /api/user, /api/settings. This colocates them and avoids collisions (e.g. a /user screen and a /user route).src/server/.+api files and server/ off from frontend-only checks.Small 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.
.ios, .android, .native, .web.StyleSheet.create({ ... }) object at the bottom of the component file rather than in a separate .styles file.format-date.test.ts next to format-date.ts (preferred over a separate __tests__/ folder) so tested files are obvious at a glance.Agent 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/.
Based on Expo app folder structure best practices by Kadi Kraman. For src/ precedence and alias mechanics, see the Expo docs.
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-project-structure" "<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.
© expo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 1 other file in plugins/expo/skills/expo-project-structure of expo/skills.
Open the folder on GitHubat commit d4f4840
We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in expo/skills, which our catalogue first saw on October 7, 2026.
Expo Project Structure next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Expo Project Structure this skillexpo/skills | 2.7k | 2 repos | ~1.5k | Automated safety check: Pass | MIT | |
| React Native Best Practicesvercel-labs/openreview | 1.7k | 17 repos | ~1.1k | Automated safety check: Pass | MIT | |
| ThemingCode-with-Beto/skills | 140 | — | ~2.5k | Automated safety check: Pass | None | |
| InitVB10/vexana | 154 | — | ~734 | Automated safety check: Pass | None | |
| Expo Playground Patternsbpinheiroms/dotfiles | 108 | — | ~9.3k | Automated safety check: Pass | None | |
| UniwindCherryHQ/cherry-studio-app | 4k | — | ~20k | Automated safety check: Warn | AGPL-3.0 |
vercel-labs/openreview
A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration.
Code-with-Beto/skills
Scaffold a unified, cross-platform color theme system into an Expo Router app.
VB10/vexana
Set up vexana (the dio-based Flutter networking layer) in a Flutter project — adds the dependency, builds one NetworkManager, an optional error model and the test fixture helper, placed in the…
bpinheiroms/dotfiles
Comprehensive UI/animation patterns reference from expo-playground.
CherryHQ/cherry-studio-app
Uniwind — Tailwind CSS v4 styling for React Native. An agent skill from CherryHQ/cherry-studio-app.
tech-leads-club/agent-skills
Guides React Native and Expo work for cross-platform apps: Expo Router navigation, fast lists, Reanimated animation, platform-specific code and project structure.
expo/skills
Check the health of published EAS Update: crash rates, install/launch counts, unique users, payload size, and the split between embedded and OTA users per channel.
expo/skills
Helps understand and write EAS workflow YAML files for Expo projects.
expo/skills
Add an iOS App Clip target to an Expo app. An agent skill from expo/skills.
expo/skills
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).
expo/skills
Submit feedback on an Expo skill—or Expo itself—and control bundled anonymous usage telemetry (off by default / opt-in).
expo/skills
Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript).
Works with
Categories
Folder structure for a new Expo app. An agent skill from expo/skills. Expo Project Structure is an agent skill from expo/skills, published by the product's own GitHub organization. Folder structure for a new Expo app.
Expo Project Structure fits situations like: laying out a new Expo project with Expo Router; deciding where a file should live in one.
Run `npx skills add expo/skills --skill expo-project-structure -a claude-code`. Or copy the skill folder (plugins/expo/skills/expo-project-structure in expo/skills) into .claude/skills/expo-project-structure in your project. Claude Code loads it when a task matches its description.
Run `npx skills add expo/skills --skill expo-project-structure -a codex`. Or copy the skill folder (plugins/expo/skills/expo-project-structure in expo/skills) into .agents/skills/expo-project-structure in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add expo/skills --skill expo-project-structure -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/expo-project-structure, .gemini/skills/expo-project-structure, .github/skills/expo-project-structure and .opencode/skills/expo-project-structure in your project.
Going by SKILL.md and its folder, Expo Project Structure needs the command-line tools its instructions call (npx). Our summary lists: Node.js.
SKILL.md names 2 domains. As links in the text: docs.expo.dev and expo.dev. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Expo Project Structure is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.5k tokens (SKILL.md is roughly 6.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Expo Project Structure: React Native Best Practices (vercel-labs/openreview, 1.7k stars), Theming (Code-with-Beto/skills, 140 stars), Init (VB10/vexana, 154 stars) and Expo Playground Patterns (bpinheiroms/dotfiles, 108 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
expo (a GitHub organization, an official publisher) maintains it in expo/skills, which has 2,685 GitHub stars. The repository holds 26 skills in this directory. The repository was last updated on October 7, 2026.
Source: expo/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.