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.