Navigeren met Parameters

Wat zijn Parameters?

Parameters laten je data meegeven van het ene scherm naar het andere. Bijvoorbeeld: als je op een product klikt in een lijst, wil je het product ID meegeven aan de detailpagina.

/screens/details?id=1

Use Case

Je hebt een lijst met reizen op je home scherm. Als gebruiker op "Barcelona" klikt, wil je:

• Navigeren naar de detailpagina
• Het ID van Barcelona meegeven
• Op de detailpagina de juiste info tonen

Link Component

Met de Link component van Expo Router kun je navigeren naar andere schermen en parameters meegeven.

Basis Gebruik

import { Link } from 'expo-router';

<Link href="/screens/details">
  <Text>Ga naar details</Text>
</Link>

Link met Parameter

import { Link } from 'expo-router';

<Link href="/screens/details?id=1">
  <Text>Bekijk item 1</Text>
</Link>

Dynamische Parameters

const itemId = 42;

<Link href={`/screens/details?id=${itemId}`}>
  <Text>Bekijk item {itemId}</Text>
</Link>

asChild Property

Met asChild kun je je eigen component klikbaar maken:

<Link href="/screens/details?id=1" asChild>
  <Pressable style={styles.button}>
    <Text style={styles.buttonText}>Klik mij</Text>
  </Pressable>
</Link>

Van Lijst naar Detail

Een veelvoorkomend patroon: een lijst met items, en bij klikken ga je naar de detailpagina.

Data Structuur

const DATA = [
  { id: 1, title: 'Barcelona', description: 'Zon, strand en Gaudí' },
  { id: 2, title: 'New York', description: 'De stad die nooit slaapt' },
  { id: 3, title: 'Rome', description: 'Eeuwenoude geschiedenis' },
];

Lijst met Links

In app/screens/tabs/home.jsx:

import { Link } from 'expo-router';
import { FlatList, Pressable, SafeAreaView, StyleSheet, Text } from 'react-native';

const DATA = [
  { id: 1, title: 'Barcelona', description: 'Zon, strand en Gaudí' },
  { id: 2, title: 'New York', description: 'De stad die nooit slaapt' },
  { id: 3, title: 'Rome', description: 'Eeuwenoude geschiedenis' },
];

export default function HomeScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <Link href={`/screens/detailScreen?id=${item.id}`} asChild>
            <Pressable style={styles.card}>
              <Text style={styles.title}>{item.title}</Text>
              <Text style={styles.description}>{item.description}</Text>
            </Pressable>
          </Link>
        )}
      />
    </SafeAreaView>
  );
}

Parameters Ophalen

Op de detailpagina gebruik je useLocalSearchParams() om de parameters op te halen.

Basic Example

import { useLocalSearchParams } from 'expo-router';

export default function DetailScreen() {
  const { id } = useLocalSearchParams();
  
  return (
    <View>
      <Text>Item ID: {id}</Text>
    </View>
  );
}

Complete Detailpagina

In app/screens/detailScreen.jsx:

import { StyleSheet, Text, View } from 'react-native';
import { useLocalSearchParams } from 'expo-router';

const DATA = {
  1: { title: 'Barcelona', description: 'Zon, strand en Gaudí' },
  2: { title: 'New York', description: 'De stad die nooit slaapt' },
  3: { title: 'Rome', description: 'Eeuwenoude geschiedenis' },
};

export default function DetailScreen() {
  const { id } = useLocalSearchParams();
  const item = DATA[id];

  if (!item) {
    return (
      <View style={styles.container}>
        <Text>Item niet gevonden</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{item.title}</Text>
      <Text style={styles.description}>{item.description}</Text>
    </View>
  );
}

Dynamische Header

Je kunt de header titel dynamisch aanpassen op basis van de parameter.

Header Aanpassen

import { useEffect } from 'react';
import { useLocalSearchParams, useNavigation } from 'expo-router';

export default function DetailScreen() {
  const { id } = useLocalSearchParams();
  const navigation = useNavigation();
  const item = DATA[id];

  useEffect(() => {
    if (item) {
      navigation.setOptions({ title: item.title });
    }
  }, [item]);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{item.title}</Text>
      <Text style={styles.description}>{item.description}</Text>
    </View>
  );
}

Modal Presentatie

Je kunt een scherm als modal laten verschijnen (van onder naar boven, vooral op iOS).

Stack Configuratie

In app/_layout.jsx:

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ headerShown: false }} />
      <Stack.Screen 
        name="screens/detailScreen" 
        options={{ 
          presentation: 'modal',
          title: 'Details' 
        }} 
      />
    </Stack>
  );
}

Volledig Voorbeeld

Projectstructuur

app/
├── _layout.jsx
├── index.jsx
├── screens/
│   ├── tabs/
│   │   ├── _layout.jsx
│   │   ├── home.jsx      (Lijst)
│   │   └── profile.jsx
│   ├── detailScreen.jsx  (Detail)
│   └── auth/
│       ├── login.jsx
│       └── register.jsx

Flow Diagram

1. Home Scherm (home.jsx)
   └── Lijst met reizen
       └── Klik op "Barcelona"
           ↓
2. Link: /screens/detailScreen?id=1
           ↓
3. Detail Scherm (detailScreen.jsx)
   └── useLocalSearchParams() haalt id=1
   └── Toont Barcelona info

Meerdere Parameters

Je kunt ook meerdere parameters meegeven:

// Navigeren met meerdere parameters
<Link href={`/screens/details?id=${id}&category=${category}`}>

// Ophalen
const { id, category } = useLocalSearchParams();
console.log(id, category); // "1" "travel"

Met router.push()

Je kunt ook parameters meegeven met router.push():

import { useRouter } from 'expo-router';

const router = useRouter();

// Enkele parameter
router.push(`/screens/details?id=${itemId}`);

// Meerdere parameters
router.push(`/screens/details?id=${id}&name=${name}`);

Samenvatting