Folder structure for React Native project with Expo example

folder-structure.md

React Native folder structure with Expo

proyecto-app/
├── .expo/
├── .github/                   # Configuración para CI/CD y GitHub Actions
├── assets/                    # Recursos estáticos
│   ├── fonts/
│   ├── images/
│   └── animations/            # Animaciones Lottie
├── app.json                   # Configuración de Expo
├── app.config.js              # Configuración avanzada de Expo
├── babel.config.js
├── metro.config.js
├── tsconfig.json
├── package.json
├── app/                       # Carpeta principal para Expo Router (reemplaza src/screens y navigation)
│   ├── _layout.tsx            # Layout principal (similar al AppNavigator)
│   ├── index.tsx              # Pantalla de inicio (ruta /)
│   ├── (tabs)/                # Grupo de tabs con su propio layout
│   │   ├── _layout.tsx        # Define la estructura de navegación por tabs
│   │   ├── home.tsx           # Tab de inicio (ruta /home)
│   │   ├── profile.tsx        # Tab de perfil (ruta /profile)
│   │   └── settings.tsx       # Tab de configuración (ruta /settings)
│   ├── (auth)/                # Grupo de autenticación con su propio layout
│   │   ├── _layout.tsx        # Layout para rutas de autenticación
│   │   ├── login.tsx          # Pantalla de login (ruta /login)
│   │   ├── register.tsx       # Pantalla de registro (ruta /register)
│   │   └── forgot-password.tsx# Pantalla de recuperación (ruta /forgot-password)
│   ├── [id]/                  # Rutas dinámicas
│   │   ├── _layout.tsx        # Layout para rutas dinámicas
│   │   ├── index.tsx          # Detalle de ítem (ruta /[id])
│   │   └── edit.tsx           # Editar ítem (ruta /[id]/edit)
│   ├── modal/                 # Modales que se superponen a la navegación principal
│   │   ├── _layout.tsx        # Layout modal
│   │   └── menu.tsx           # Modal de menú (ruta /modal/menu)
│   └── +not-found.tsx         # Pantalla 404 personalizada
├── src/                       # Resto del código de la aplicación
│   ├── api/                   # Servicios API y configuración
│   │   ├── config/            # Configuración de API (baseURL, headers, etc.)
│   │   ├── endpoints/         # Definiciones de endpoints
│   │   ├── services/          # Funciones para llamadas a API
│   │   └── hooks/             # Hooks personalizados para consumir APIs
│   ├── components/            # Componentes reutilizables
│   │   ├── common/            # Botones, inputs, loaders, etc.
│   │   ├── forms/             # Componentes relacionados con formularios
│   │   ├── layout/            # Headers, footers, etc.
│   │   └── ui/                # Componentes de UI genéricos
│   ├── constants/             # Constantes de la aplicación
│   │   ├── colors.ts
│   │   ├── typography.ts
│   │   └── config.ts          # Variables de entorno y configuración
│   ├── contexts/              # Contextos de React
│   ├── hooks/                 # Hooks personalizados
│   ├── i18n/                  # Internacionalización
│   │   ├── translations/
│   │   └── index.ts
│   ├── store/                 # Estado global (Redux, Zustand, etc.)
│   │   ├── slices/            # Para Redux Toolkit
│   │   └── index.ts
│   ├── theme/                 # Tema de la aplicación
│   │   ├── index.ts
│   │   └── themeProvider.tsx
│   ├── types/                 # Definiciones de TypeScript
│   │   ├── api.types.ts
│   │   ├── navigation.types.ts
│   │   └── models.types.ts
│   └── utils/                 # Funciones de utilidad
│       ├── formatters.ts
│       ├── validators.ts
│       └── helpers.ts
└── tests/                     # Pruebas
    ├── __mocks__/
    ├── components/
    ├── screens/
    └── setup.ts