Estructura del proyecto

Una estructura de carpetas escalable para apps React Native y Expo. Organiza pantallas, componentes, hooks y servicios para mantener el código.

Diseño completo del proyecto (Expo Router)

A continuación, el árbol de carpetas desde la raíz del repositorio hasta src/. Descarga un ZIP que se descomprime en la misma estructura (marcadores de posición y .gitkeep en directorios vacíos).

Archivo ZIP — descomprime para obtener 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

Propósito de las carpetas

app/ — Pantallas y navegación (Expo Router) o tu configuración de navegador
components/ — Piezas de UI reutilizables (botones, tarjetas, entradas)
hooks/ — Hooks personalizados (useAuth, useApi, useDebounce)
services/ — Clientes API, lógica de autenticación, almacenamiento
store/ — Fragmentos de estado global
utils/ — Formato, validación, utilidades
constants/ — Tema, configuración, valores de entorno
locales/ — Archivos de traducción (JSON por idioma)
languageConfig/ — Configuración de idioma e i18n (p. ej. i18next, expo-localization)

Estructura con React Navigation

Si usas React Navigation (no Expo Router), un patrón habitual:

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