skills.rest
Taquit
TaquitCOMMUNITY
Explore all skills by this author →
GitHub

expo-project-structure

Defines folder structure conventions for scaffolding new Expo apps with Expo Router.

Updated Aug 23, 2026
Search Tags:#scaffolding#mobile#react-native#expo#project-layout#expo-router#folder-structure
One-click install
npx skills add https://github.com/Taquit/Life-Manager --skill expo-project-structure-taquit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-project-structure
Source: https://github.com/Taquit/Life-Manager/tree/main/double_m_react/.agents/skills/expo-project-structure
Command: npx skills add https://github.com/Taquit/Life-Manager --skill expo-project-structure-taquit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When starting a new Expo app, developers often struggle to decide where files should live — routes, components, screens, server code, and platform-specific variants can quickly become disorganized. This Skill provides a proven folder layout so new projects start with a clean, scalable structure. ## Core Features & Use Cases - Routes-only app directory: Keeps src/app/ strictly for Expo Router routes, with screen bodies moved to src/screens/ and reusable UI in src/components/. - Server code separation: Groups API routes under app/api/ with +api files and shared server helpers in src/server/, keeping secret environment variables away from frontend code. - Platform-specific files: Guides splitting components into .ios, .android, .native, and .web variants with identical props, plus colocated styles and tests. - Use Case: You are scaffolding a brand-new Expo app with Expo Router and need to decide where to put a settings screen, a shared button component, and a server API route — this Skill gives you the exact layout to follow. ## Quick Start Use the expo-project-structure skill to lay out my new Expo app with the src directory, routes-only app folder, screens, components, and server code separation.

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?▼

Place app code under src/ with a routes-only src/app/ directory where every file becomes a route. Put reusable UI in src/components/, screen bodies in src/screens/, server helpers in src/server/, and shared utilities in src/utils/ with colocated tests.

Where should screen components go in an Expo Router project?▼

Screen bodies belong in src/screens/, not in the app/ directory, because every file in app/ becomes a route. Each route file then just renders its screen, and screen-private components are colocated inside that screen's folder.

Does Expo Router support the src directory?▼

Yes, Expo Router supports both app/ and src/app/ out of the box. To switch, move the folder and restart the bundler; the default create-expo-app template aliases @/* to ./src/* in tsconfig.json.

How do I write platform-specific components in Expo?▼

Split larger platform differences into files like bar-chart.tsx and bar-chart.web.tsx, imported extension-free so Metro picks the right variant. Props must be identical across variants, a default file is always required, and supported extensions are .ios, .android, .native, and .web.

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

No, this structure applies only to new projects with no committed folder layout. Existing apps should keep their current conventions, and when unsure whether a project is new, ask before moving any files.

Related Skills

Explore More Software Engineering Skills→
SajinthanSajinthan

screen

Generate Expo Router screens, route groups, and layouts for React Native apps.

Community
Advanced
rostiSerostiSe
1

expo-deployment

Automates Expo app builds, signings, and submissions to Apple and Google via EAS.

Community
Advanced
bmiit145bmiit145

expo-project-structure

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

Community
Basic
Chris-MaskeyChris-Maskey

project-structure

Organize React/Next.js/TypeScript code into feature-based module directories.

Community
Advanced