Quand j’ai commencé à enseigner le développement mobile en BTS SIO, la navigation entre écrans posait systématiquement problème à mes étudiants. Quel module choisir ? Comment structurer les routes ? Pourquoi l’écran ne s’affiche pas ? Après des dizaines de projets accompagnés, je peux vous dire que React Navigation reste la solution la plus fiable et la mieux documentée pour gérer la react nav dans vos applications React Native. Dans ce guide, je vous accompagne de l’installation à la configuration avancée, avec des exemples concrets tirés de mes cours.

Comprendre React Navigation et son rôle dans vos projets

React Navigation est une bibliothèque JavaScript qui permet de gérer la navigation entre les différents écrans d’une application React Native. Contrairement au web où le navigateur gère nativement les URL et l’historique, les applications mobiles nécessitent un système dédié pour empiler, remplacer ou afficher des vues.

Créée et maintenue par la communauté open source avec le soutien de l’équipe React Native chez Meta, cette bibliothèque s’est imposée comme le standard de facto. Meta, l’entreprise derrière Facebook, est aussi à l’origine de React et React Native. La bibliothèque couvre aujourd’hui la quasi-totalité des cas d’usage : navigation par pile d’écrans, onglets, menus latéraux, modales et même le deep linking.

En pratique, react nav fonctionne en encapsulant vos composants dans un NavigationContainer qui maintient l’état de navigation. Chaque navigateur (Stack, Tab, Drawer) définit un ensemble de routes associées à des composants React. Le système gère automatiquement les transitions, les animations et la mémoire des écrans visités.

Ce qui distingue React Navigation des autres solutions, c’est son approche entièrement JavaScript. Contrairement à React Native Navigation de Wix qui s’appuie sur les contrôleurs natifs de chaque plateforme, React Navigation rend ses propres vues. Cela simplifie considérablement l’installation et la maintenance, même si cela peut parfois impacter les performances sur des applications très complexes. Pour bien comprendre les différences entre les frameworks front-end, je vous recommande de consulter mon comparatif React vs Angular.

Installer React Navigation pas à pas

L’installation de React Navigation nécessite plusieurs paquets. Je vous détaille la procédure complète que j’utilise avec mes étudiants, étape par étape.

Commencez par installer le paquet principal :

npm install @react-navigation/native

Ensuite, installez les dépendances nécessaires pour React Native. Ces bibliothèques gèrent les gestures tactiles, les animations et les zones sûres (encoches, barres de statut) :

npm install react-native-screens react-native-safe-area-context

Pour un projet Expo, une seule commande suffit :

npx expo install react-native-screens react-native-safe-area-context

Ajoutez ensuite le navigateur de votre choix. Pour une navigation classique par pile d’écrans :

npm install @react-navigation/stack react-native-gesture-handler

Ou si vous préférez la version native (plus performante) :

npm install @react-navigation/native-stack

La différence entre @react-navigation/stack et @react-navigation/native-stack est importante. La version native-stack utilise les composants natifs de chaque plateforme (UINavigationController sur iOS, Fragment sur Android), ce qui offre de meilleures performances et des transitions plus fluides. Je recommande cette version pour tous les nouveaux projets.

Enfin, configurez le point d’entrée de votre application en encapsulant le tout dans un NavigationContainer :

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Si vous travaillez avec React et Vite sur un projet web, notez que React Navigation est spécifiquement conçu pour React Native. Pour le web, tournez-vous plutôt vers React Router.

Les trois navigateurs principaux : Stack, Tab et Drawer

React Navigation propose trois types de navigateurs que vous pouvez utiliser seuls ou imbriquer les uns dans les autres. Voici comment chacun fonctionne et quand l’utiliser.

Stack Navigator : la navigation par pile

Le Stack Navigator empile les écrans les uns sur les autres, comme un jeu de cartes. Quand l’utilisateur navigue vers un nouvel écran, celui-ci se place au-dessus de la pile. Le bouton retour retire l’écran du sommet. C’est le navigateur le plus courant, utilisé pour les flux linéaires : liste vers détail, formulaire en plusieurs étapes, parcours d’achat.

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: '#6200ee' },
        headerTintColor: '#fff',
        headerTitleStyle: { fontWeight: 'bold' },
      }}
    >
      <Stack.Screen
        name="Products"
        component={ProductListScreen}
        options={{ title: 'Nos produits' }}
      />
      <Stack.Screen
        name="ProductDetail"
        component={ProductDetailScreen}
        options={({ route }) => ({ title: route.params.name })}
      />
    </Stack.Navigator>
  );
}

Tab Navigator : la navigation par onglets

Le Tab Navigator affiche une barre d’onglets en bas (ou en haut) de l’écran. Chaque onglet représente une section indépendante de l’application. C’est le pattern que vous retrouvez dans Instagram, Twitter ou Spotify.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ color, size }) => {
          const icons = {
            Home: 'home',
            Search: 'search',
            Profile: 'person',
          };
          return <Icon name={icons[route.name]} size={size} color={color} />;
        },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Search" component={SearchScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

Drawer Navigator : le menu latéral

Le Drawer Navigator ajoute un menu coulissant accessible par un geste de glissement depuis le bord de l’écran ou via un bouton hamburger. Idéal pour les applications avec de nombreuses sections comme les applications d’administration ou les tableaux de bord. L’installation nécessite un paquet supplémentaire via @react-navigation/drawer.

npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

La force de react nav réside dans la possibilité de combiner ces navigateurs. Un cas classique : un Tab Navigator principal avec un Stack Navigator dans chaque onglet, et un Drawer pour les réglages. Cette imbrication vous permet de reproduire n’importe quel flux de navigation.

Configurer vos routes et passer des paramètres

La configuration des routes va au-delà de la simple association nom-composant. Je vous montre les techniques que j’enseigne pour structurer proprement votre navigation.

Passage de paramètres entre écrans

Pour envoyer des données d’un écran à un autre, utilisez le deuxième argument de navigation.navigate :

// Écran source
function ProductListScreen({ navigation }) {
  return (
    <Button
      title="Voir le produit"
      onPress={() =>
        navigation.navigate('ProductDetail', {
          productId: 42,
          name: 'Clavier mécanique',
        })
      }
    />
  );
}

// Écran destination
function ProductDetailScreen({ route }) {
  const { productId, name } = route.params;
  return <Text>Produit : {name} (ID: {productId})</Text>;
}

Typage TypeScript des routes

Pour les projets professionnels, je recommande fortement de typer vos routes avec TypeScript. Cela évite les erreurs de paramètres manquants et améliore l’autocomplétion :

type RootStackParamList = {
  Home: undefined;
  ProductDetail: { productId: number; name: string };
  Cart: { items?: string[] };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

// Les écrans reçoivent automatiquement les bons types
type ProductDetailProps = NativeStackScreenProps<RootStackParamList, 'ProductDetail'>;

function ProductDetailScreen({ route }: ProductDetailProps) {
  const { productId, name } = route.params; // Typé automatiquement
}

Paramètres initiaux et valeurs par défaut

Vous pouvez définir des paramètres par défaut directement dans la configuration de la route. C’est utile pour les écrans accessibles depuis plusieurs endroits :

<Stack.Screen
  name="Settings"
  component={SettingsScreen}
  initialParams={{ section: 'general' }}
/>

Pour aller plus loin dans le rendu de contenu dynamique dans vos composants, mon article sur React Markdown vous donnera des pistes intéressantes.

Navigation avancée : modales, deep linking et authentification

Une fois les bases maîtrisées, voici les patterns avancés que vous rencontrerez en production.

Écrans modaux

Les modales s’affichent par-dessus le contenu existant, avec une animation de bas en haut. React Navigation gère ce cas avec l’option presentation: 'modal' :

<Stack.Navigator>
  <Stack.Group>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Details" component={DetailsScreen} />
  </Stack.Group>
  <Stack.Group screenOptions={{ presentation: 'modal' }}>
    <Stack.Screen name="CreatePost" component={CreatePostScreen} />
  </Stack.Group>
</Stack.Navigator>

Ce pattern est idéal pour les formulaires de création, les filtres de recherche ou les confirmations. L’utilisateur peut fermer la modale sans perdre le contexte de l’écran précédent.

Deep linking

Le deep linking permet d’ouvrir un écran précis de votre application depuis une URL externe (notification push, e-mail, QR code). React Navigation propose une configuration déclarative :

const linking = {
  prefixes: ['https://monapp.fr', 'monapp://'],
  config: {
    screens: {
      Home: '',
      ProductDetail: 'product/:productId',
      Profile: 'user/:userId',
    },
  },
};

<NavigationContainer linking={linking} fallback={<LoadingScreen />}>
  {/* navigateurs */}
</NavigationContainer>

Flux d’authentification

Le pattern recommandé par la documentation officielle de React Navigation consiste à afficher conditionnellement les écrans selon l’état de connexion :

<Stack.Navigator>
  {isSignedIn ? (
    <Stack.Group>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Group>
  ) : (
    <Stack.Group screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="Register" component={RegisterScreen} />
    </Stack.Group>
  )}
</Stack.Navigator>

Ce pattern est plus sûr que de vérifier l’authentification dans chaque écran, car les routes protégées n’existent tout simplement pas tant que l’utilisateur n’est pas connecté. Pour les aspects sécurité de vos applications, consultez mon guide sur la sécurité informatique en PME.

Performances et bonnes pratiques

La react nav peut devenir un goulet d’étranglement si vous ne suivez pas quelques règles simples. Voici les optimisations que j’applique systématiquement.

Utilisez react-native-screens. Cette bibliothèque utilise les conteneurs natifs de chaque plateforme pour gérer les écrans. Les écrans non visibles sont véritablement détachés du rendu, ce qui réduit la consommation mémoire de 30 à 50 % sur les applications avec beaucoup d’écrans.

Activez le lazy loading. Par défaut, React Navigation ne rend un écran que lorsque l’utilisateur y accède pour la première fois. Ne désactivez pas ce comportement sauf nécessité absolue :

// Bon : lazy loading activé (défaut)
<Tab.Navigator>
  <Tab.Screen name="Feed" component={FeedScreen} />
  <Tab.Screen name="Search" component={SearchScreen} />
</Tab.Navigator>

// À éviter sauf besoin réel
<Tab.Navigator screenOptions={{ lazy: false }}>

Mémorisez vos composants lourds. Si un écran contient des listes longues ou des calculs coûteux, utilisez React.memo et useMemo pour éviter les re-rendus inutiles lors des transitions.

Évitez les fonctions inline dans les options de navigation. Chaque re-rendu crée une nouvelle référence, ce qui force React Navigation à recalculer les en-têtes :

// Moins performant
<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={() => ({ title: 'Accueil' })}
/>

// Plus performant
<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ title: 'Accueil' }}
/>

Limitez la profondeur d’imbrication. Au-delà de 3 niveaux de navigateurs imbriqués, la complexité explose et les performances chutent. Si vous dépassez ce seuil, repensez votre architecture.

Pour les projets qui intègrent des éléments 3D dans leurs vues, mon article sur React Three Fiber détaille comment optimiser le rendu dans un contexte React.

Comparatif des solutions de navigation React

Avant de vous engager sur une solution, il est utile de comparer les options disponibles. Voici un tableau synthétique basé sur mon expérience et les retours de la communauté.

Mon conseil : pour 90 % des projets, React Navigation est le bon choix. Optez pour React Native Navigation de Wix uniquement si vous avez des contraintes de performances critiques et une équipe capable de gérer la configuration native. Expo Router est excellent si vous êtes déjà dans l’écosystème Expo et que vous appréciez la navigation basée sur le système de fichiers, similaire à Next.js.

Si vous hésitez entre différentes approches pour votre projet, mon article sur le développement web sur mesure peut vous aider à cadrer votre réflexion. Pour mieux comprendre le versionnement de React et choisir la bonne version, consultez aussi mon guide sur le versioning React.

Erreurs courantes et comment les résoudre

En accompagnant mes étudiants et en répondant sur les forums, je retrouve régulièrement les mêmes erreurs. Voici les cinq problèmes les plus fréquents et leurs solutions.

« Couldn’t find a navigation object » : cette erreur signifie que votre composant tente d’utiliser useNavigation() en dehors d’un NavigationContainer. Vérifiez que votre arbre de composants est bien encapsulé dans le conteneur de navigation, et que vous n’avez pas deux NavigationContainer imbriqués (erreur fréquente lors de l’ajout de navigateurs).

Écran blanc après navigation : souvent causé par un composant qui ne retourne rien (return undefined). Assurez-vous que chaque écran retourne bien du JSX. Vérifiez aussi que le nom de route passé à navigate() correspond exactement (casse incluse) au name défini dans Stack.Screen.

Perte des paramètres au retour arrière : les paramètres sont liés à la route. Si vous utilisez navigation.goBack(), les paramètres de l’écran précédent sont conservés. Mais si vous utilisez navigation.navigate('Home') pour revenir, les anciens paramètres peuvent être écrasés. Utilisez navigation.setParams() pour mettre à jour les paramètres de l’écran courant.

Boucle infinie de navigation : survient souvent dans les flux d’authentification quand un useEffect déclenche une navigation qui provoque un re-rendu, qui redéclenche le useEffect. Utilisez un état de chargement pour bloquer la navigation tant que la vérification d’authentification n’est pas terminée.

Gestionnaire de gestes en conflit : si vous utilisez des bibliothèques comme react-native-gesture-handler avec le Drawer Navigator, des conflits de gestes peuvent apparaître. Assurez-vous d’importer react-native-gesture-handler en tout premier dans votre fichier d’entrée (avant tout autre import).

Pour compléter votre apprentissage de la navigation React, mon guide détaillé sur React Navigate couvre des cas d’usage complémentaires avec useNavigate côté web.

Lucie Moreau

Formatrice IT indépendante depuis 2016, ancienne étudiante BTS SIO SLAM. 6 ans d'expérience en entreprise.