Stack Navigator: wat is het, stacknavigatie in React Native

Wat is Stack Navigator?

Stack Navigator — een van de basissnavigators van de React Navigation-bibliotheek die het stackmodel voor schermen implementeert. Het biedt navigatie die vertrouwd is voor mobiele gebruikers: het openen van een nieuw scherm gaat gepaard met een animatie van rechts, en de «Terug»-knop of veegbeweging brengt de gebruiker terug naar het vorige scherm. Stack Navigator wordt ondersteund op iOS en Android en gebruikt native platformcomponenten voor maximale prestaties.

React Navigation is de populairste navigatiebibliotheek voor React Native, geïnstalleerd in 85% van de projecten (volgens npm-gegevens, 2026). Stack Navigator maakt deel uit van de kern en is beschikbaar in twee implementaties: createNativeStackNavigator (native, aanbevolen) en createStackNavigator (JavaScript, voor complexe aangepaste animaties). De native versie verscheen in React Navigation v5 en werd de standaard in v6+.

Het belangrijkste voordeel van Stack Navigator — natuurlijk gedrag dat bekend is bij iOS- en Android-gebruikers. Op iOS wordt de stack visueel weergegeven als UINavigationController, op Android als FragmentManager met slide-animatie. De ontwikkelaar hoeft de stacklogica niet handmatig te implementeren — de navigator beheert schermstatussen, back stack en animaties automatisch.

Hoe stacknavigatie werkt

Stacknavigatie is gebaseerd op het LIFO-principe (Last In, First Out). Wanneer de gebruiker een nieuw scherm opent, plaatst de navigator het bovenaan de stack. Bij het indrukken van «Terug» wordt het bovenste scherm verwijderd en ziet de gebruiker het vorige. De stack kan elk aantal schermen bevatten — de beperking is alleen het apparaatgeheugen.

Elk scherm in de stack behoudt zijn status. Bij terugkeer naar het vorige scherm wordt de status automatisch hersteld. Dit onderscheidt de stack van andere navigatietypen (Tab, Drawer), waar schermen opnieuw kunnen worden aangemaakt. React Navigation beheert de status via zijn eigen navigatiecontextmechanisme.

Veegbeweging voor terugkeer

Op iOS ondersteunt Stack Navigator de veegbeweging van de linkerrand van het scherm om terug te gaan — dit is het standaard iOS-gedrag dat gebruikers verwachten. Op Android is de veegbeweging standaard uitgeschakeld, maar kan worden ingeschakeld via de optie gestureEnabled. In Native Stack werkt de veegbeweging native, zonder vertragingen in de JavaScript-thread.

Native Stack versus JS Stack

React Navigation biedt twee typen Stack Navigator: Native Stack (createNativeStackNavigator) en JS Stack (createStackNavigator). Het belangrijkste verschil is de plaats van uitvoering van de animatie. Native Stack gebruikt native animatiedrivers van iOS en Android, terwijl JS Stack via de JavaScript-thread van React Native werkt. De keuze hangt af van prestatie- en aanpassingsvereisten.

Native Stack wordt aanbevolen voor de meeste projecten. Het zorgt voor vloeiende 60 FPS-animaties zonder de JS-thread te blokkeren, ondersteunt de systeemveegbeweging op iOS en gebruikt native overgangen — slide op iOS, fade op Android. Native Stack is echter beperkt in het aanpassen van animaties: alleen een vooraf gedefinieerde set overgangen is beschikbaar.

JS Stack geeft volledige controle over animaties via cardStyleInterpolator. De ontwikkelaar kan elke animatie maken: schalen, roteren, parallax, aangepaste curves. Nadeel — animaties werken in de JS-thread, wat frameverlies kan veroorzaken op zwakkere apparaten bij complexe overgangen. Voor 70% van de projecten is Native Stack ruim voldoende.

// Native Stack — aanbevolen implementatie
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>
  );
}

Installatie en configuratie van Stack Navigator

Om met Stack Navigator te beginnen, moet React Navigation en zijn afhankelijkheden worden geïnstalleerd. De minimale set omvat @react-navigation/native, @react-navigation/native-stack en react-native-screens. Na installatie wordt de app ingepakt in NavigationContainer — een context die navigatiestatus biedt aan alle onderliggende componenten.

# Installatie van React Navigation-afhankelijkheden
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# Voor iOS — pod installatie
cd ios && pod install && cd ..

Na installatie wordt Stack.Navigator gemaakt met gedefinieerde schermen in RootStackParamList. Elk scherm wordt gekoppeld aan een React-component via de prop component. De navigator kan root zijn of genest in een andere navigator (Tab, Drawer). Voor configuratie worden screenOptions gebruikt — gemeenschappelijk voor alle schermen of individueel voor elk.

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: 'Home' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Parameters en aanpassingen van Stack Navigator

Stack Navigator biedt talloze opties voor het aanpassen van uiterlijk en gedrag. De belangrijkste parameters worden ingesteld via screenOptions op Navigator-niveau of options op Screen-niveau. De ontwikkelaar kan de titel, overgangsanimatie, veegbeweging, kaartstijl en achtergrondverduistering configureren. De flexibiliteit van instellingen maakt het mogelijk navigatie aan te passen aan het ontwerpsysteem van de app.

Aangepaste animaties via cardStyleInterpolator

Voor JS Stack stelt cardStyleInterpolator in staat om willekeurige overgangsanimaties tussen schermen te maken. Dit is een krachtig hulpmiddel voor het implementeren van unieke visuele effecten: schalen, roteren, parallax, horizontale flip. De functie ontvangt de huidige voortgangswaarden van de animatie (current, next) en retourneert stijlen voor de te animeren elementen.

Navigatietypering met TypeScript

Stack Navigator ondersteunt volledige typering via TypeScript. Hiervoor wordt RootStackParamList gedefinieerd — een type-object waarin de sleutels schermnamen zijn en de waarden parametertypen. Na typering krijgen navigation.navigate en route.params automatische aanvulling en typecontrole. Dit elimineert fouten bij het doorgeven van parameters tijdens de compilatiefase.

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

// Getypeerd scherm
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

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

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

Geavanceerde scenario's: modale vensters en groepen

Stack Navigator ondersteunt het groeperen van schermen en modale vensters. Groepen (Screen Group) maken het mogelijk gemeenschappelijke instellingen toe te passen op meerdere schermen zonder duplicatie. Modale vensters worden geïmplementeerd via stack presentation: 'modal' — het scherm wordt van onderen geopend met verduistering van de achtergrond, zoals een systeemmodaal op iOS. Deze optie is alleen beschikbaar in Native Stack.

Voor complexe navigatie kan Stack Navigator worden genest in Tab Navigator of Drawer Navigator. Bijvoorbeeld, het tabblad «Home» bevat zijn eigen schermstack en het tabblad «Profiel» de zijne. Een dergelijke compositie van navigators is de standaardaanpak voor productie-apps. Elke stack is geïsoleerd: de back stack binnen een tabblad heeft geen invloed op andere tabbladen.

// Geneste stack in 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>
  );
}

// Schermgroepen met gedeelde opties
<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>