Update to Expo2

{
  "description": "Navigation and routing for Expo Router. Covers file-based routes, groups and dynamic routes, folder organization, Link with previews and context menus, native Stack, page titles, modals and form sheets, NativeTabs, headers and toolbars, and header search bars.",
  "included_files": [
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 422
    },
    {
      "relative_path": "references/form-sheet.md",
      "size_in_bytes": 6320
    },
    {
      "relative_path": "references/route-structure.md",
      "size_in_bytes": 5268
    },
    {
      "relative_path": "references/search.md",
      "size_in_bytes": 5173
    },
    {
      "relative_path": "references/tabs.md",
      "size_in_bytes": 13323
    },
    {
      "relative_path": "references/toolbar-and-headers.md",
      "size_in_bytes": 8061
    },
    {
      "relative_path": "references/zoom-transitions.md",
      "size_in_bytes": 4848
    }
  ],
  "name": "expo-router",
  "skill_md_contents": "---\nname: expo-router\ndescription: Navigation and routing for Expo Router. Covers file-based routes, groups and dynamic routes, folder organization, Link with previews and context menus, native Stack, page titles, modals and form sheets, NativeTabs, headers and toolbars, and header search bars.\nlicense: MIT\n---\n\n# Expo Router Navigation\n\nNavigation and routing for Expo Router apps. For screen styling, colors, controls, media, and visual effects, use the `expo-native-ui` skill; for motion and gestures, use `expo-animation`.\n\n## References\n\nConsult these resources as needed:\n\n```\nreferences/\n  route-structure.md     Route conventions, dynamic routes, groups, folder organization\n  tabs.md                NativeTabs, migration from JS tabs, iOS 26 features\n  toolbar-and-headers.md Stack headers and toolbar buttons, menus, search (iOS only)\n  form-sheet.md          Form sheets in expo-router: configuration, footers and background interaction.\n  search.md              Search bar with headers, useSearch hook, filtering patterns\n  zoom-transitions.md    Apple Zoom: fluid zoom transitions with Link.AppleZoom (iOS 18+)\n```\n\n## Code Style\n\n- Always use kebab-case for file names, e.g. `comment-card.tsx`\n- When moving routes, preserve existing URLs, deep links, and authentication guards. Remove an old route only after checking its references and confirming its behavior is covered by the replacement or a compatibility redirect.\n- Never use special characters in file names\n- Configure tsconfig.json with path aliases, and prefer aliases over relative imports for refactors.\n\n## Routes\n\nSee `./references/route-structure.md` for detailed route conventions.\n\n- Routes belong in the `app` directory.\n- Never co-locate components, types, or utilities in the app directory. This is an anti-pattern.\n- Ensure the app always has a route that matches \"/\", it may be inside a group route.\n\n## Library Preferences\n\n- `Color` from `expo-router` for native semantic colors, not raw `PlatformColor` (type-safe, auto-adapts to light/dark). See `expo-native-ui` for the full color palette pattern.\n- In SDK 56+, never import from `@react-navigation/*` directly — use `expo-router/react-navigation` instead (covers `@react-navigation/native`, `/core`, `/elements`, `/routers`)\n\n## Behavior\n\n- Prefer `Stack.SearchBar` to add a search bar to a screen\n\n# Navigation\n\n## Link\n\nUse `<Link href=\"/path\" />` from 'expo-router' for navigation between routes.\n\n```tsx\nimport { Link } from 'expo-router';\n\n// Basic link\n<Link href=\"/path\" />\n\n// Wrapping custom components\n<Link href=\"/path\" asChild>\n  <Pressable>...</Pressable>\n</Link>\n```\n\nWhenever possible, include a `<Link.Preview>` to follow iOS conventions. Add context menus and previews frequently to enhance navigation.\n\nKeep previews read-only: mounting or prefetching a screen must not submit, delete, purchase, or change account state. Preserve authentication checks for previewed routes; route groups alone do not enforce access control. Keep credentials out of URL parameters and enforce authorization on the backend too.\n\n## Stack\n\n- ALWAYS use `_layout.tsx` files to define stacks\n- Use Stack from 'expo-router/stack' for native navigation stacks\n\n### Page Title\n\nSet the page title with `Stack.Title`:\n\n```tsx\n<Stack.Title>Home</Stack.Title>\n```\n\n## Context Menus\n\nAdd long press context menus to Link components:\n\n```tsx\nimport { Link } from \"expo-router\";\n\n<Link href=\"/settings\" asChild>\n  <Link.Trigger>\n    <Pressable>\n      <Card />\n    </Pressable>\n  </Link.Trigger>\n  <Link.Menu>\n    <Link.MenuAction\n      title=\"Share\"\n      icon=\"square.and.arrow.up\"\n      onPress={handleSharePress}\n    />\n    <Link.MenuAction\n      title=\"Block\"\n      icon=\"nosign\"\n      destructive\n      onPress={handleBlockPress}\n    />\n    <Link.Menu title=\"More\" icon=\"ellipsis\">\n      <Link.MenuAction title=\"Copy\" icon=\"doc.on.doc\" onPress={() => {}} />\n      <Link.MenuAction\n        title=\"Delete\"\n        icon=\"trash\"\n        destructive\n        onPress={() => {}}\n      />\n    </Link.Menu>\n  </Link.Menu>\n</Link>;\n```\n\n## Link Previews\n\nUse link previews frequently to enhance navigation:\n\n```tsx\n<Link href=\"/settings\">\n  <Link.Trigger>\n    <Pressable>\n      <Card />\n    </Pressable>\n  </Link.Trigger>\n  <Link.Preview />\n</Link>\n```\n\nLink preview can be used with context menus.\n\n## Modal\n\nPresent a screen as a modal:\n\n```tsx\n<Stack.Screen name=\"modal\" options={{ presentation: \"modal\" }} />\n```\n\nPrefer this to building a custom modal component.\n\n## Sheet\n\nPresent a screen as a dynamic form sheet:\n\n```tsx\n<Stack.Screen\n  name=\"sheet\"\n  options={{\n    presentation: \"formSheet\",\n    sheetGrabberVisible: true,\n    sheetAllowedDetents: [0.5, 1.0],\n    contentStyle: { backgroundColor: \"transparent\" },\n  }}\n/>\n```\n\n- Using `contentStyle: { backgroundColor: \"transparent\" }` makes the background liquid glass on iOS 26+.\n\n## Common route structure\n\nA standard app layout with tabs and stacks inside each tab:\n\n```\napp/\n  _layout.tsx — <NativeTabs />\n  (index,search)/\n    _layout.tsx — <Stack />\n    index.tsx — Main list\n    search.tsx — Search view\n```\n\n```tsx\n// app/_layout.tsx\nimport { NativeTabs } from \"expo-router/unstable-native-tabs\";\nimport { ThemeProvider, DarkTheme, DefaultTheme } from \"expo-router/react-navigation\";\nimport { useColorScheme } from \"react-native\";\n\nexport default function Layout() {\n  const colorScheme = useColorScheme();\n  return (\n    <ThemeProvider value={colorScheme === \"dark\" ? DarkTheme : DefaultTheme}>\n      <NativeTabs>\n        <NativeTabs.Trigger name=\"(index)\">\n          <NativeTabs.Trigger.Icon sf=\"list.dash\" md=\"list\" />\n          <NativeTabs.Trigger.Label>Items</NativeTabs.Trigger.Label>\n        </NativeTabs.Trigger>\n        <NativeTabs.Trigger name=\"(search)\" role=\"search\" />\n      </NativeTabs>\n    </ThemeProvider>\n  );\n}\n```\n\nCreate a shared group route so both tabs can push common screens:\n\n```tsx\n// app/(index,search)/_layout.tsx\nimport { Stack } from \"expo-router/stack\";\nimport { colors } from \"@/theme/colors\";\n\nexport default function Layout({ segment }) {\n  const screen = segment.match(/\\((.*)\\)/)?.[1]!;\n  const titles: Record<string, string> = { index: \"Items\", search: \"Search\" };\n\n  return (\n    <Stack\n      screenOptions={{\n        headerTransparent: true,\n        headerShadowVisible: false,\n        headerLargeTitleShadowVisible: false,\n        headerLargeStyle: { backgroundColor: \"transparent\" },\n        headerTitleStyle: { color: colors.label },\n        headerLargeTitleEnabled: true,\n        headerBlurEffect: \"none\",\n        headerBackButtonDisplayMode: \"minimal\",\n      }}\n    >\n      <Stack.Screen name={screen} options={{ title: titles[screen] }} />\n      <Stack.Screen name=\"i/[id]\" options={{ headerLargeTitleEnabled: false }} />\n    </Stack>\n  );\n}\n```\n\n`headerLargeTitleEnabled` is the SDK 56+ option name; older SDKs use `headerLargeTitle`, which is deprecated upstream.\n\n## Submitting Feedback\nWhen the user requests feedback submission, use:\n```bash\nnpx --yes @expo/agent-cli@1.0.23 feedback --category skills --subject \"expo-router\" \"<actionable feedback>\"\n```\nInclude only relevant technical details; keep credentials, private data, and conversation contents out of feedback.\n"
}