Stack Navigator : qu'est-ce que c'est, navigation par pile dans React Native

Qu'est-ce que Stack Navigator ?

Stack Navigator — l'un des navigateurs de base de la bibliothèque React Navigation qui implémente le modèle de pile d'écrans. Il fournit la navigation familière aux utilisateurs mobiles : l'ouverture d'un nouvel écran est accompagnée d'une animation de glissement vers la droite, et le bouton « Retour » ou le geste de balayage ramène l'utilisateur à l'écran précédent. Stack Navigator prend en charge iOS et Android, en utilisant des composants natifs de la plateforme pour des performances maximales.

React Navigation est la bibliothèque de navigation la plus populaire pour React Native, installée dans 85 % des projets (selon les données npm, 2026). Stack Navigator fait partie de son noyau et est disponible en deux implémentations : createNativeStackNavigator (native, recommandée) et createStackNavigator (JavaScript, pour les animations personnalisées complexes). La version native est apparue dans React Navigation v5 et est devenue la norme dans v6+.

Le principal avantage de Stack Navigator — le comportement naturel familier aux utilisateurs d'iOS et d'Android. Sur iOS, la pile est visuellement représentée par UINavigationController, sur Android — par FragmentManager avec animation de glissement. Le développeur n'a pas besoin d'implémenter la logique de pile manuellement — le navigateur gère les états des écrans, la pile de retour et les animations automatiquement.

Comment fonctionne la navigation par pile

La navigation par pile est basée sur le principe LIFO (Last In, First Out). Lorsqu'un utilisateur ouvre un nouvel écran, le navigateur le place au sommet de la pile. En appuyant sur « Retour », l'écran supérieur est supprimé et l'utilisateur voit l'écran précédent. La pile peut contenir un nombre quelconque d'écrans — la seule limite est la mémoire de l'appareil.

Chaque écran dans la pile conserve son état. En revenant à un écran précédent, son état est automatiquement restauré. Cela distingue la pile des autres types de navigation (Tab, Drawer), où les écrans peuvent être recréés. React Navigation gère l'état via son propre mécanisme de contexte de navigation.

Geste de balayage pour revenir en arrière

Sur iOS, Stack Navigator prend en charge un geste de balayage depuis le bord gauche pour revenir en arrière — c'est le comportement standard d'iOS que les utilisateurs attendent. Sur Android, le geste est désactivé par défaut, mais peut être activé via l'option gestureEnabled. Dans Native Stack, le geste fonctionne nativement sans délai du thread JavaScript.

Native Stack vs JS Stack

React Navigation propose deux types de Stack Navigator : Native Stack (createNativeStackNavigator) et JS Stack (createStackNavigator). La principale différence — où l'animation est exécutée. Native Stack utilise les pilotes d'animation natifs d'iOS et d'Android, tandis que JS Stack fonctionne via le thread JavaScript de React Native. Le choix entre eux dépend des exigences de performance et de personnalisation.

Native Stack est recommandé pour la plupart des projets. Il fournit des animations fluides à 60 FPS sans bloquer le thread JS, prend en charge le geste de balayage de retour système sur iOS et utilise des transitions natives — slide sur iOS, fade sur Android. Cependant, Native Stack est limité dans la personnalisation des animations : seul un ensemble prédéfini de transitions est disponible.

JS Stack donne un contrôle total sur les animations via cardStyleInterpolator. Le développeur peut créer n'importe quelle animation : mise à l'échelle, rotation, parallaxe, courbes personnalisées. L'inconvénient — les animations s'exécutent dans le thread JS, ce qui peut provoquer des chutes d'images sur les appareils faibles avec des transitions complexes. Pour 70 % des projets, Native Stack est plus que suffisant.

// Native Stack — implémentation recommandée
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string; name: string };
  Settings: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function AppNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: true }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

Installation et configuration de Stack Navigator

Pour commencer avec Stack Navigator, il est nécessaire d'installer React Navigation et ses dépendances. L'ensemble minimal inclut @react-navigation/native, @react-navigation/native-stack et react-native-screens. Après l'installation, l'application est enveloppée dans NavigationContainer — un contexte qui fournit l'état de navigation à tous les composants enfants.

# Installation des dépendances React Navigation
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# Pour iOS — installation du pod
cd ios && pod install && cd ..

Après l'installation, Stack.Navigator est créé avec des écrans spécifiques définis dans RootStackParamList. Chaque écran est lié à un composant React via la prop component. Le navigateur peut être racine ou imbriqué dans un autre navigateur (Tab, Drawer). Pour la configuration, on utilise screenOptions — communs à tous les écrans ou individuels pour chacun.

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

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: number; title: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: '#6200ee' },
          headerTintColor: '#fff',
          gestureEnabled: true,
        }}>
        <Stack.Screen name="Home" component={HomeScreen}
          options={{ title: 'Accueil' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Paramètres et personnalisation de Stack Navigator

Stack Navigator fournit de nombreuses options pour personnaliser l'apparence et le comportement. Les principaux paramètres sont définis via screenOptions au niveau du Navigator ou options au niveau du Screen. Le développeur peut configurer l'en-tête, l'animation de transition, le geste de balayage, le style de la carte et l'assombrissement du fond. La flexibilité des réglages permet d'adapter la navigation au système de design de l'application.

Animations personnalisées via cardStyleInterpolator

Pour JS Stack, cardStyleInterpolator permet de créer des animations de transition arbitraires entre les écrans. C'est un outil puissant pour implémenter des effets visuels uniques : mise à l'échelle, rotation, parallaxe, retournement horizontal. La fonction reçoit les valeurs actuelles de progression de l'animation (current, next) et retourne des styles pour les éléments animés.

Typage de la navigation avec TypeScript

Stack Navigator prend en charge le typage complet via TypeScript. Pour cela, on définit RootStackParamList — un type objet où les clés sont les noms des écrans et les valeurs sont les types des paramètres. Après le typage, navigation.navigate et route.params obtiennent l'autocomplétion et la vérification de types. Cela élimine les erreurs de passage de paramètres à la compilation.

type RootStackParamList = {
  Home: undefined;
  Product: { id: string; category: string };
  Checkout: { items: CartItem[]; total: number };
};

// Écran typé
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

function ProductScreen({ navigation, route }: ProductScreenProps) {
  const { id, category } = route.params;

  return (
    <View>
      <Text>Produit {id} — {category}</Text>
      <Button title="Ajouter au panier"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

Scénarios avancés : fenêtres modales et groupes

Stack Navigator prend en charge le regroupement d'écrans et les fenêtres modales. Les groupes (Screen Group) permettent d'appliquer des paramètres communs à plusieurs écrans sans duplication. Les fenêtres modales sont implémentées via stack presentation: 'modal' — l'écran s'ouvre depuis le bas avec un assombrissement du fond, comme un modal système sur iOS. Cette option est disponible uniquement dans Native Stack.

Pour la navigation complexe, Stack Navigator peut être imbriqué dans un Tab Navigator ou Drawer Navigator. Par exemple, l'onglet « Accueil » a sa propre pile d'écrans, et l'onglet « Profil » a la sienne. Cette composition de navigateurs est l'approche standard pour les applications de production. Chaque pile est isolée : la pile de retour dans un onglet n'affecte pas les autres onglets.

// Pile imbriquée dans Tab Navigator
const HomeStack = createNativeStackNavigator<HomeStackParamList>();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="PostDetail" component={PostDetailScreen}
        options={{ presentation: 'modal' }} />
    </HomeStack.Navigator>
  );
}

// Groupes d'écrans avec options partagées
<Stack.Navigator>
  <Stack.Group screenOptions={{ headerShown: true }}>
    <Stack.Screen name="Main" component={MainScreen} />
    <Stack.Screen name="About" component={AboutScreen} />
  </Stack.Group>
  <Stack.Screen name="Auth" component={AuthScreen}
    options={{ presentation: 'modal', headerShown: false }} />
</Stack.Navigator>