La navigation est ce que l'utilisateur touche le plus. Un mauvais choix tue une app, un bon choix la fait oublier. Voici les patterns éprouvés en 2026.

Les trois primitives

  • Stack : pile d'écrans avec push/pop. Parcours linéaire profond.
  • Tabs : sections parallèles accessibles en permanence. Navigation latérale rapide.
  • Drawer : menu latéral pour accès secondaire. Sur le retour en 2026 mais à utiliser avec parcimonie.

Pattern 1 : Tabs + Stack par tab (LE plus courant)

C'est le pattern Instagram, Twitter, la plupart des apps grand public. Chaque onglet a sa propre navigation Stack. Basculer d'onglet conserve l'état de chacun.

// app/(tabs)/_layout.tsx avec expo-router
import { Tabs } from 'expo-router';
export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: 'Accueil' }} />
      <Tabs.Screen name="search" options={{ title: 'Recherche' }} />
      <Tabs.Screen name="profile" options={{ title: 'Profil' }} />
    </Tabs>
  );
}

Chaque dossier onglet ((tabs)/index, (tabs)/search, etc.) peut contenir son propre Stack.

Pattern 2 : Modal pour l'action primaire

Sur l'écran principal, un bouton flottant ouvre une modale (création de contenu, composer un message). La modale n'est pas dans la stack principale, elle s'ouvre par-dessus.

// app/modal.tsx
<Stack.Screen
  name="create-post"
  options={{ presentation: 'modal', animation: 'slide_from_bottom' }}
/>

Pattern 3 : Deep linking

Chaque écran doit être adressable. C'est critique pour :

  • Partage de lien.
  • Notifications push (tap → écran spécifique).
  • Réouverture depuis background sur la bonne vue.

expo-router le fait nativement via le file system. Les URLs générées sont claires et stables.

Pattern 4 : Auth flow séparé

Les écrans de login/signup/onboarding sont une stack isolée. Après authentification, on remplace (pas push) la stack par les tabs principaux.

// app/_layout.tsx
if (!isAuthenticated) return <Redirect href="/login" />;
return <Tabs ... />;

Pattern de remplacement, pas de push. Sinon le bouton "retour" revient au login — désastre UX.

Les anti-patterns

  • Drawer comme navigation principale : cache les features. Les utilisateurs mobiles ne savent pas découvrir un drawer.
  • Plus de 5 onglets : illisible sur petit écran. Si vous en avez 6, vous masquez en fait 2 features.
  • Stack profond (6+ niveaux) : l'utilisateur se perd. Prévoyez un raccourci vers la racine.
  • Back button inconsistent : sur Android, gérez hardwareBackPress explicitement ou vous aurez des bugs.

Mon stack 2026

  • React Navigation 7 + expo-router en wrapper.
  • react-native-screens natif pour les vraies transitions natives.
  • Analytics sur chaque navigation (mesurer l'utilisation réelle des écrans).

Audit UX d'une app mobile ? Je le fais régulièrement.

Tags #mobile #react-native #navigation #ux