Expo Router Skill

// app.config.ts
export default {
  scheme: "myapp",
  experiments: { typedRoutes: true },
} satisfies import("expo/config").ExpoConfig;

// app/orders/[id].tsx
import { useLocalSearchParams } from "expo-router";
import { z } from "zod";
 
const paramsSchema = z.object({ id: z.string().min(1) });
 
export default function OrderDetailScreen() {
  const raw = useLocalSearchParams<{ id: string }>();
  const { id } = paramsSchema.parse(raw);
  // ...
}

// src/navigation/hrefs.ts
import type { Href } from "expo-router";
 
export const orderDetailHref = (id: string): Href => ({
  pathname: "/orders/[id]",
  params: { id },
});

// Usage
import { Link, router } from "expo-router";
import { orderDetailHref } from "@/navigation/hrefs";
 
<Link href={orderDetailHref("42")}>Order 42</Link>
router.push(orderDetailHref("42"));

npx expo start    # regen .expo/types/router.d.ts
npx tsc --noEmit  # catch invalid href at compile time

app/
├── _layout.tsx           # root Stack or Slot
├── (tabs)/
│   ├── _layout.tsx
│   ├── index.tsx
│   └── orders/
│       ├── index.tsx
│       └── [id].tsx
└── (auth)/
    ├── _layout.tsx
    └── login.tsx

// app/_layout.tsx
import { Stack, useRouter, useSegments } from "expo-router";
import { useEffect } from "react";
import { useSession } from "@/features/auth/session";
 
export default function RootLayout() {
  const { session, isLoading } = useSession();
  const segments = useSegments();
  const router = useRouter();
 
  useEffect(() => {
    if (isLoading) return;
    const inAuth = segments[0] === "(auth)";
    if (!session && !inAuth) router.replace("/(auth)/login");
    if (session && inAuth) router.replace("/(tabs)");
  }, [session, isLoading, segments]);
 
  return <Stack screenOptions={{ headerShown: false }} />;
}

// app.config.ts
export default {
  scheme: "myapp",
  ios: { bundleIdentifier: "com.example.myapp" },
  android: { package: "com.example.myapp" },
  // Optional universal links:
  // ios: { associatedDomains: ["applinks:myapp.com"] },
} satisfies import("expo/config").ExpoConfig;

npx expo start
npx tsc --noEmit
 
# iOS simulator deep link test
xcrun simctl openurl booted "myapp://orders/42"

Use Expo Router skill. SDK 57, typedRoutes on.
Add /settings/notifications and /settings/profile under (tabs).
Provide href builders and tsc verification. Routes thin - screens live in src/features/settings/.

Use Expo Router skill.
Deep link: myapp://orders/[id] from push payload { orderId }.
Map to typed route, Zod validate id, document simctl test command.

Use Expo Router skill.
Migrate router.push("/order/" + id) calls to centralized Href module.
List every file to touch and tsc gate.

- [ ] app/ tree documented
- [ ] experiments.typedRoutes: true in app.config.ts
- [ ] href builders exported from single module
- [ ] Zod (or equivalent) on dynamic params
- [ ] scheme / associatedDomains if deep links required
- [ ] npx tsc --noEmit in verification section
- [ ] No business logic duplicated in route files