Structure du projet

Une arborescence évolutive pour les apps React Native et Expo. Organisez écrans, composants, hooks et services pour la maintenabilité.

Arborescence complète (Expo Router)

Voici l'arborescence complète depuis la racine du dépôt jusqu'à src/. Téléchargez une archive ZIP qui se déploie dans la même structure (fichiers placeholder et .gitkeep dans les dossiers vides).

Archive ZIP — extrayez pour obtenir 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

Rôle des dossiers

app/ — Écrans et navigation (Expo Router) ou votre configuration de navigateur
components/ — Composants UI réutilisables (boutons, cartes, champs)
hooks/ — Hooks personnalisés (useAuth, useApi, useDebounce)
services/ — Clients API, logique d'authentification, stockage
store/ — Morceaux d'état global
utils/ — Formatage, validation, utilitaires
constants/ — Thème, configuration, variables d'environnement
locales/ — Fichiers de traduction (JSON par langue)
languageConfig/ — Configuration langue et i18n (ex. i18next, expo-localization)

Structure React Navigation

Avec React Navigation (sans Expo Router), un schéma courant :

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