Typing Navigation & Route Params

// app.json - enable typed routes (beta in SDK 57)
{
  "expo": {
    "experiments": {
      "typedRoutes": true
    }
  }
}

// app/user/[id].tsx
import { Link, router, useLocalSearchParams, type Href } from "expo-router";
import { Text, View } from "react-native";
import { z } from "zod";
 
const Params = z.object({
  id: z.string().regex(/^\d+$/),
});
 
export default function UserScreen() {
  const raw = useLocalSearchParams<"/user/[id]">();
  const { id } = Params.parse(raw); // runtime gate - params are strings
 
  return (
    <View>
      <Text>User {id}</Text>
      <Link href={{ pathname: "/user/[id]", params: { id: "42" } }}>User 42</Link>
    </View>
  );
}
 
// Imperative navigation - Href catches typos
export function openUser(userId: string) {
  const href = { pathname: "/user/[id]", params: { id: userId } } satisfies Href;
  router.push(href);
}

// app/places/[placeId].tsx
import { Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
import { z } from "zod";
 
const PathParams = z.object({
  placeId: z.string().uuid(),
});
 
const QueryParams = z.object({
  tab: z.enum(["overview", "photos"]).default("overview"),
  ref: z.string().optional(),
});
 
type PlaceDetail = { id: string; name: string; city: string };
 
async function fetchPlace(id: string): Promise<PlaceDetail> {
  // Replace with your API client
  return { id, name: "Mission Dolores Park", city: "San Francisco" };
}
 
export default function PlaceDetailScreen() {
  const raw = useLocalSearchParams<
    "/places/[placeId]",
    { tab?: string; ref?: string }
  >();
 
  const path = PathParams.safeParse(raw);
  const query = QueryParams.safeParse(raw);
 
  const [place, setPlace] = useState<PlaceDetail | null>(null);
  const [error, setError] = useState<string | null>(null);
 
  useEffect(() => {
    if (!path.success) {
      setError("Invalid place id in URL");
      return;
    }
    fetchPlace(path.data.placeId)
      .then(setPlace)
      .catch(() => setError("Failed to load place"));
  }, [path.success, path.success ? path.data.placeId : null]);
 
  if (!path.success || !query.success) {
    return (
      <View style={styles.center}>
        <Text style={styles.error}>This link is invalid or outdated.</Text>
      </View>
    );
  }
 
  if (error) {
    return (
      <View style={styles.center}>
        <Text style={styles.error}>{error}</Text>
      </View>
    );
  }
 
  if (!place) {
    return (
      <View style={styles.center}>
        <ActivityIndicator />
      </View>
    );
  }
 
  const { tab, ref } = query.data;
 
  return (
    <View style={styles.container}>
      <Stack.Screen options={{ title: place.name }} />
      <Text style={styles.title}>{place.name}</Text>
      <Text style={styles.meta}>{place.city}</Text>
      <Text style={styles.meta}>
        Tab: {tab}
        {ref ? ` · ref=${ref}` : ""}
      </Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, gap: 8 },
  center: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24 },
  title: { fontSize: 22, fontWeight: "700" },
  meta: { fontSize: 15, color: "#64748b" },
  error: { color: "#dc2626", textAlign: "center" },
});

// app/places/index.tsx - typed links to dynamic routes
import { Link, useRouter } from "expo-router";
import { FlatList, Pressable, StyleSheet, Text } from "react-native";
 
const PLACES = [
  { id: "550e8400-e29b-41d4-a716-446655440000", name: "Dolores Park" },
  { id: "6ba7b810-9dad-11d1-80b4-00c04fd430c8", name: "Golden Gate" },
] as const;
 
export default function PlacesIndex() {
  const router = useRouter();
 
  return (
    <FlatList
      data={PLACES}
      keyExtractor={(p) => p.id}
      contentContainerStyle={styles.list}
      renderItem={({ item }) => (
        <Pressable
          onPress={() =>
            router.push({
              pathname: "/places/[placeId]",
              params: { placeId: item.id, tab: "photos" },
            })
          }
        >
          <Text style={styles.row}>{item.name}</Text>
          <Link
            href={{
              pathname: "/places/[placeId]",
              params: { placeId: item.id, tab: "overview", ref: "list" },
            }}
            style={styles.link}
          >
            Open via Link
          </Link>
        </Pressable>
      )}
    />
  );
}
 
const styles = StyleSheet.create({
  list: { padding: 16, gap: 12 },
  row: { fontSize: 17, fontWeight: "600" },
  link: { color: "#2563eb", marginTop: 4 },
});

// app/search/[...terms].tsx - catch-all segments are string[]
import { useGlobalSearchParams } from "expo-router";
import { Text, View } from "react-native";
import { z } from "zod";
 
const TermsParams = z.object({
  terms: z
    .union([z.string(), z.array(z.string())])
    .transform((v) => (Array.isArray(v) ? v : [v]))
    .pipe(z.array(z.string()).min(1)),
});
 
export default function SearchScreen() {
  const raw = useGlobalSearchParams<"/search/[...terms]">();
  const parsed = TermsParams.safeParse(raw);
 
  if (!parsed.success) {
    return <Text>Missing search terms</Text>;
  }
 
  return (
    <View>
      <Text>Searching: {parsed.data.terms.join(" · ")}</Text>
    </View>
  );
}

import { type Href, useRouter, useSegments } from "expo-router";
 
// Tab-relative profile navigation without relative Href strings
function ProfileShortcut() {
  const [group] = useSegments();
  const router = useRouter();
  const href = `/${group}/profile` as Href; // cast after building from segments
  return null; // wire to a Pressable in real UI
}
 
// Narrow imperative navigation behind a helper
function navToPlace(placeId: string, tab: "overview" | "photos" = "overview") {
  const router = useRouter();
  router.push({
    pathname: "/places/[placeId]",
    params: { placeId, tab },
  });
}