expo-project-structure

Defines the recommended folder structure for new Expo apps using Expo Router.

Updated Sep 6, 2026
One-click install
npx skills add https://github.com/sombek/fitness-guidance-app --skill expo-project-structure-sombek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-project-structure
Source: https://github.com/sombek/fitness-guidance-app/tree/main/mobile/.agents/skills/expo-project-structure
Command: npx skills add https://github.com/sombek/fitness-guidance-app --skill expo-project-structure-sombek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When scaffolding a new Expo app, developers often struggle to decide where files should live — routes, screens, components, server code, and platform-specific variants can end up scattered or mixed together. This Skill provides a concrete, opinionated folder layout for new Expo projects so structure decisions are made consistently from day one. ## Core Features & Use Cases - Complete project skeleton: A full directory tree covering src/app routes, components/, screens/, server/, utils/, hooks/, and root config files like app.json and eas.json. - Routes-only app directory: Enforces Expo Router conventions where every file in src/app is a route, with screen bodies extracted into screens/ and API routes grouped under app/api/ with +api suffixes. - Platform-specific code patterns: Guidance on splitting components into .ios, .android, .native, and .web variants, plus colocating styles and tests next to source files. - Use Case: You are starting a brand-new Expo app with Expo Router and need to decide where to put a settings screen, a reusable button component, and a server API route — this Skill gives you the exact placement for each. ## Quick Start Use the expo-project-structure skill to lay out the folder structure for my new Expo Router app.

Frequently Asked Questions about expo-project-structure

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a new Expo app with Expo Router?▼

Keep app code under src/ with a routes-only src/app directory where every file is a route. Place reusable UI in components/, screen bodies in screens/, server helpers in server/, and utilities in utils/, with config files like app.json at the root.

Where should screen components go in Expo Router?▼

Put complex screen bodies in a screens/ folder and let each route file in app/ simply render its screen. Colocate a screen's private components inside its own folder, such as screens/home/components/.

How do I create API routes in an Expo app?▼

Append +api to a filename inside the app directory, such as app/api/user+api.ts, to create a server API route. Group all API routes under app/api/ and keep shared server-only helpers in src/server/.

Does Expo Router support platform-specific component files?▼

Yes, Metro resolves platform extensions like .ios, .android, .native, and .web automatically when you import without an extension. A default file with no platform extension is always required, and props must be identical across variants.

Should I restructure an existing Expo app to match this layout?▼

No, this structure is intended only for new projects with no committed layout. Existing apps should keep their current conventions, and you should ask before moving any files if unsure whether a project is new.