Expo Router

File-based routing comme Next.js pour mobile

Section 1

Structure file-based

Step 1

Organisation des routes

Expo Router adopte la même convention de fichiers que Next.js App Router. Chaque fichier dans app/ devient une route.

snippet.typescript

typescript

1// Structure Expo Router
2app/
3├── _layout.tsx         // Layout racine (providers, tabs)
4├── index.tsx           // Route /  (Home)
5├── (auth)/
6│   ├── _layout.tsx     // Stack navigation
7│   ├── login.tsx       // Route /login
8│   └── register.tsx
9├── (tabs)/
10│   ├── _layout.tsx     // Tab bar navigation
11│   ├── index.tsx       // Onglet Home
12│   ├── tutorials.tsx   // Onglet Tutoriels
13│   └── profile.tsx     // Onglet Profil
14└── tutorials/
15    ├── [slug].tsx      // Route /tutorials/:slug
16    └── [slug]/
17        └── lesson/
18            └── [lessonSlug].tsx

Step 2

Layout avec Tab Bar

Le fichier (tabs)/_layout.tsx configure la barre d'onglets. Expo Router génère automatiquement la navigation.

snippet.typescript

typescript

1// Structure Expo Router
2app/
3├── _layout.tsx         // Layout racine (providers, tabs)
4├── index.tsx           // Route /  (Home)
5├── (auth)/
6│   ├── _layout.tsx     // Stack navigation
7│   ├── login.tsx       // Route /login
8│   └── register.tsx
9├── (tabs)/
10│   ├── _layout.tsx     // Tab bar navigation
11│   ├── index.tsx       // Onglet Home
12│   ├── tutorials.tsx   // Onglet Tutoriels
13│   └── profile.tsx     // Onglet Profil
14└── tutorials/
15    ├── [slug].tsx      // Route /tutorials/:slug
16    └── [slug]/
17        └── lesson/
18            └── [lessonSlug].tsx

Topics and skills covered

Expo
Expo Router
Navigation
Tabs

Composants natifs et styles

Ch.1