Navigation
Routing basé sur les fichiers avec Expo Router — navigation par onglets, pile et routes protégées par authentification.
Navigation
ScaleRocket Mobile utilise Expo Router pour le routing basé sur les fichiers, similaire à Next.js. Les fichiers dans le répertoire app/ deviennent automatiquement des routes.
Conventions Expo Router
_layout.tsx— Définit le navigateur pour un répertoire (Stack, Tabs, Drawer)(group)/— Groupes de routes (parenthèses). Regroupe les routes sans ajouter de segment d'URLindex.tsx— Route par défaut d'un répertoire- Fichiers = routes —
login.tsxdevient la route/logindans son groupe
Structure de navigation
Root Stack (_layout.tsx)
├── (auth) Stack
│ ├── login
│ ├── register
│ └── forgot-password
└── (tabs) Tab Navigator
├── index (Home)
├── profile (Profile)
└── settings (Settings)Le layout racine affiche un Stack avec headerShown: false. Chaque groupe définit son propre type de navigateur.
Groupes de routes
| Groupe | Navigateur | Usage |
|---|---|---|
(auth) | Stack | Login, register, forgot-password. Sans header. |
(tabs) | Tabs | Home, Profile, Settings. Barre d'onglets en bas. |
Les groupes entre parenthèses n'ajoutent pas de segments de chemin. (auth) et (tabs) sont tous les deux au niveau racine.
Navigation par onglets
Le navigateur à onglets est défini dans app/(tabs)/_layout.tsx :
import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
export default function TabLayout() {
return (
<Tabs screenOptions={{ tabBarActiveTintColor: "#2563EB" }}>
<Tabs.Screen
name="index"
options={{
title: "Home",
tabBarIcon: ({ color }) => (
<Ionicons name="home" size={24} color={color} />
),
}}
/>
<Tabs.Screen
name="profile"
options={{
title: "Profile",
tabBarIcon: ({ color }) => (
<Ionicons name="person" size={24} color={color} />
),
}}
/>
<Tabs.Screen
name="settings"
options={{
title: "Settings",
tabBarIcon: ({ color }) => (
<Ionicons name="settings" size={24} color={color} />
),
}}
/>
</Tabs>
);
}Navigation par pile (Stack)
Le groupe auth utilise un navigateur de type pile dans app/(auth)/_layout.tsx :
import { Stack } from "expo-router";
export default function AuthLayout() {
return (
<Stack screenOptions={{ headerShown: false }} />
);
}Naviguez entre les écrans avec router ou Link :
import { router } from "expo-router";
// Navigation programmatique
router.push("/(auth)/register");
// Ou utilisez le composant Link
import { Link } from "expo-router";
<Link href="/(auth)/register">Créer un compte</Link>Routes protégées par authentification
La garde d'auth dans app/_layout.tsx utilise useSession() pour vérifier l'état d'authentification :
import { useSession } from "../lib/auth";
import { Redirect } from "expo-router";
export default function RootLayout() {
const { session, loading } = useSession();
if (loading) return <ActivityIndicator />;
if (!session) return <Redirect href="/(auth)/login" />;
return <Stack screenOptions={{ headerShown: false }} />;
}Le layout des onglets a aussi une garde secondaire : si la session est perdue pendant qu'on est sur un écran à onglets, il redirige vers la connexion.
Ajouter de nouveaux écrans
Pour ajouter un nouvel écran :
- Créez un fichier dans le groupe approprié (ex.
app/(tabs)/analytics.tsx) - Exportez un composant React par défaut
- La route est disponible immédiatement — pas de configuration de routeur nécessaire
- Ajoutez-le au navigateur à onglets dans
_layout.tsxs'il doit apparaître comme onglet
// app/(tabs)/analytics.tsx
export default function AnalyticsScreen() {
return (
<View>
<Text>Analytics</Text>
</View>
);
}