Project Structure

A scalable folder structure for React Native and Expo apps. Organize screens, components, hooks, and services for maintainability.

Full project layout (Expo Router)

Below is the full project folder layout from the repo root through src/. Download a ZIP that unpacks to the same folder tree (placeholders and .gitkeep in empty dirs).

ZIP archive — extract to get my-app/

my-app/
├── .gitignore
├── assets/                    # Root-level assets (Expo default)
│   ├── icon.png
│   ├── splash.png
│   └── adaptive-icon.png
├── src/
│   ├── app/                   # Screens & navigation (Expo Router)
│   │   ├── (tabs)/
│   │   │   ├── _layout.tsx
│   │   │   ├── index.tsx
│   │   │   └── profile.tsx
│   │   ├── (auth)/
│   │   │   ├── _layout.tsx
│   │   │   └── sign-in.tsx
│   │   ├── _layout.tsx
│   │   └── index.tsx
│   ├── components/
│   │   ├── ui/                # Primitives (Button, Input, …)
│   │   └── common/            # Composed blocks (Header, ListItem, …)
│   ├── hooks/
│   ├── services/              # API, auth, storage
│   ├── store/                 # Global state (Zustand, Redux, …)
│   ├── utils/
│   ├── constants/             # Theme, config
│   ├── locales/               # Translation JSON (en, es, …)
│   │   ├── en.json
│   │   └── es.json
│   ├── languageConfig/        # Language / i18n setup (i18next, expo-localization, …)
│   │   └── config.ts
│   ├── assets/                # App-specific images, fonts (optional mirror)
│   │   ├── images/
│   │   └── fonts/
│   └── types/
└── README.md

Folder Purposes

app/ — Screens and navigation (Expo Router) or your navigator setup
components/ — Reusable UI pieces (buttons, cards, inputs)
hooks/ — Custom hooks (useAuth, useApi, useDebounce)
services/ — API clients, auth logic, storage
store/ — Global state slices
utils/ — Formatting, validation, helpers
constants/ — Theme, config, env values
locales/ — Translation files (JSON per language)
languageConfig/ — Language and i18n setup (e.g. i18next, expo-localization)

React Navigation Structure

If using React Navigation (not Expo Router), a common pattern:

my-app/
├── .gitignore
├── src/
│   ├── navigation/
│   │   ├── RootNavigator.tsx
│   │   └── AuthNavigator.tsx
│   ├── screens/
│   │   ├── Home/
│   │   ├── Profile/
│   │   └── Settings/
│   ├── components/
│   ├── hooks/
│   ├── services/
│   ├── store/
│   ├── utils/
│   ├── constants/
│   ├── locales/               # Translation JSON (en, es, …)
│   │   ├── en.json
│   │   └── es.json
│   ├── languageConfig/        # Language / i18n setup
│   │   └── config.ts
│   └── types/
└── README.md