Sommaire

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).

Besoin d'un audit UX pour votre app mobile ? Parlons-en.

Tags #mobile #react-native #navigation #ux