expo · Ubax · Jul 6, 2026 · Jul 2, 2026 · Jul 2, 2026 · Jul 2, 2026
diff --git a/.claude/skills/expo-skill-eval/references/runtime-matrix.md b/.claude/skills/expo-skill-eval/references/runtime-matrix.md
@@ -10,7 +10,8 @@ Modes:
 
 | Skill | Mode | Platforms | Notes |
 |-------|------|-----------|-------|
-| building-native-ui | expo-go | ios, android | Core target for visual evals. Expo Router + RN primitives all work in Expo Go. Native tabs sections may need a dev build — verify per case. |
+| building-native-ui | expo-go | ios, android | Core target for visual evals. RN primitives + styling/controls/media/animations all work in Expo Go. |
+| expo-router | expo-go | ios, android | Navigation/routing target: routes, links, native stacks, modals, sheets, headers. Native tabs sections may need a dev build — verify per case. |
 | expo-tailwind-setup | expo-go | ios, android, web | NativeWind v5 / react-native-css are JS-level; works in Expo Go. Good web candidate too. |
 | native-data-fetching | expo-go | ios, android | Fetch/React Query/SWR are pure JS. Mock or use stable public endpoints so evals are deterministic. |
 | use-dom | expo-go | ios, android, web | DOM components run in a webview on native (Expo Go, SDK 52+) and as-is on web. Allow extra settle time for the webview to paint. |

diff --git a/README.md b/README.md
@@ -95,7 +95,8 @@ Agents choose the right skill from the task context and each skill's description
 
 | Skill | Use it for |
 | --- | --- |
-| `building-native-ui` | Expo Router screens, navigation, styling, animations, native tabs, and app UI patterns. |
+| `building-native-ui` | Native-feeling screen styling, semantic colors, controls, icons, media, animations, and visual effects. |
+| `expo-router` | Expo Router navigation: file-based routes, links, native stacks, modals, sheets, native tabs, and headers. |
 | `native-data-fetching` | API calls, React Query, SWR, caching, offline support, and Expo Router data loaders. |
 | `expo-api-routes` | Expo Router API routes with EAS Hosting. |
 | `expo-tailwind-setup` | Tailwind CSS v4, `react-native-css`, and NativeWind v5 setup. |

diff --git a/plugins/expo/.claude-plugin/plugin.json b/plugins/expo/.claude-plugin/plugin.json
@@ -1,6 +1,6 @@
 {
   "name": "expo",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Official Expo skills for building, deploying, upgrading, and debugging Expo apps",
   "author": {
     "name": "Expo Team",

diff --git a/plugins/expo/.codex-plugin/plugin.json b/plugins/expo/.codex-plugin/plugin.json
@@ -1,6 +1,6 @@
 {
   "name": "expo",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Official Expo skills for building, deploying, upgrading, and debugging Expo and React Native apps.",
   "author": {
     "name": "Expo Team",

diff --git a/plugins/expo/.cursor-plugin/plugin.json b/plugins/expo/.cursor-plugin/plugin.json
@@ -1,7 +1,7 @@
 {
   "name": "expo",
   "displayName": "Expo",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Official Expo skills for building, deploying, upgrading, and debugging Expo and React Native apps.",
   "author": {
     "name": "Expo Team",

diff --git a/plugins/expo/README.md b/plugins/expo/README.md
@@ -65,10 +65,11 @@ Official AI agent skills from the Expo team for building, deploying, upgrading,
 ### App Design
 
 - **add-app-clip** — Add an iOS App Clip target to an Expo app (AASA, associated domains, TestFlight)
-- **building-native-ui** — Build beautiful apps with Expo Router, styling, components, navigation, and animations
+- **building-native-ui** — Build beautiful native-feeling screens: styling, semantic colors, controls, icons, media, animations, and visual effects
 - **expo-api-routes** — Create API routes in Expo Router with EAS Hosting
 - **expo-brownfield** — Integrate Expo and React Native into existing native iOS or Android apps
 - **expo-dev-client** — Build and distribute Expo development clients locally or via TestFlight
+- **expo-router** — Navigation and routing: file-based routes, links, native stacks, modals, sheets, native tabs, and headers
 - **expo-tailwind-setup** — Set up Tailwind CSS v4 in Expo with NativeWind v5
 - **expo-ui** — Native UI with @expo/ui: universal cross-platform components first, with SwiftUI and Jetpack Compose for platform-specific needs
 - **native-data-fetching** — Network requests, API calls, caching, and offline support

diff --git a/plugins/expo/skills/building-native-ui/SKILL.md b/plugins/expo/skills/building-native-ui/SKILL.md
@@ -1,12 +1,14 @@
 ---
 name: building-native-ui
-description: Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.
-version: 1.0.1
+description: Build beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, animations, visual effects, gradients, storage, and responsive layout. For routing and navigation, use the expo-router skill.
+version: 1.1.0
 license: MIT
 ---
 
 # Expo UI Guidelines
 
+For routes, links, stacks, tabs, modals, sheets, and headers, use the `expo-router` skill.
+
 ## References
 
 Consult these resources as needed:
@@ -15,18 +17,12 @@ Consult these resources as needed:
 references/
   animations.md          Reanimated: entering, exiting, layout, scroll-driven, gestures
   controls.md            Native iOS: Switch, Slider, SegmentedControl, DateTimePicker, Picker
-  form-sheet.md          Form sheets in expo-router: configuration, footers and background interaction.
   gradients.md           CSS gradients via experimental_backgroundImage (New Arch only)
   icons.md               SF Symbols via expo-image (sf: source), names, animations, weights
   media.md               Camera, audio, video, and file saving
-  route-structure.md     Route conventions, dynamic routes, groups, folder organization
-  search.md              Search bar with headers, useSearch hook, filtering patterns
   storage.md             SQLite, AsyncStorage, SecureStore
-  tabs.md                NativeTabs, migration from JS tabs, iOS 26 features
-  toolbar-and-headers.md Stack headers and toolbar buttons, menus, search (iOS only)
   visual-effects.md      Blur (expo-blur) and liquid glass (expo-glass-effect)
   webgpu-three.md        3D graphics, games, GPU visualizations with WebGPU and Three.js
-  zoom-transitions.md    Apple Zoom: fluid zoom transitions with Link.AppleZoom (iOS 18+)
 ```
 
 ## Running the App
@@ -64,18 +60,9 @@ Expo Go supports a huge range of features out of the box:
 - Be cautious of unterminated strings. Ensure nested backticks are escaped; never forget to escape quotes correctly.
 - Always use import statements at the top of the file.
 - Always use kebab-case for file names, e.g. `comment-card.tsx`
-- Always remove old route files when moving or restructuring navigation
 - Never use special characters in file names
 - Configure tsconfig.json with path aliases, and prefer aliases over relative imports for refactors.
 
-## Routes
-
-See `./references/route-structure.md` for detailed route conventions.
-
-- Routes belong in the `app` directory.
-- Never co-locate components, types, or utilities in the app directory. This is an anti-pattern.
-- Ensure the app always has a route that matches "/", it may be inside a group route.
-
 ## Library Preferences
 
 - Never use modules removed from React Native such as Picker, WebView, SafeAreaView, or AsyncStorage
@@ -105,7 +92,6 @@ See `./references/route-structure.md` for detailed route conventions.
 - Use views with built-in haptics like `<Switch />` from React Native and `@react-native-community/datetimepicker`
 - When a route belongs to a Stack, its first child should almost always be a ScrollView with `contentInsetAdjustmentBehavior="automatic"` set
 - When adding a `ScrollView` to the page it should almost always be the first component inside the route component
-- Prefer `headerSearchBarOptions` in Stack.Screen options to add a search bar
 - Use the `<Text selectable />` prop on text containing data that could be copied
 - Consider formatting large numbers like 1.4M or 38k
 - Never use intrinsic elements like 'img' or 'div' unless in a webview or Expo DOM component
@@ -193,185 +179,3 @@ Use CSS `boxShadow` style prop. NEVER use legacy React Native shadow or elevatio
 ```
 
 'inset' shadows are supported.
-
-# Navigation
-
-## Link
-
-Use `<Link href="/path" />` from 'expo-router' for navigation between routes.
-
-```tsx
-import { Link } from 'expo-router';
-
-// Basic link
-<Link href="/path" />
-
-// Wrapping custom components
-<Link href="/path" asChild>
-  <Pressable>...</Pressable>
-</Link>
-```
-
-Whenever possible, include a `<Link.Preview>` to follow iOS conventions. Add context menus and previews frequently to enhance navigation.
-
-## Stack
-
-- ALWAYS use `_layout.tsx` files to define stacks
-- Use Stack from 'expo-router/stack' for native navigation stacks
-
-### Page Title
-
-Set the page title in Stack.Screen options:
-
-```tsx
-<Stack.Screen options={{ title: "Home" }} />
-```
-
-## Context Menus
-
-Add long press context menus to Link components:
-
-```tsx
-import { Link } from "expo-router";
-
-<Link href="/settings" asChild>
-  <Link.Trigger>
-    <Pressable>
-      <Card />
-    </Pressable>
-  </Link.Trigger>
-  <Link.Menu>
-    <Link.MenuAction
-      title="Share"
-      icon="square.and.arrow.up"
-      onPress={handleSharePress}
-    />
-    <Link.MenuAction
-      title="Block"
-      icon="nosign"
-      destructive
-      onPress={handleBlockPress}
-    />
-    <Link.Menu title="More" icon="ellipsis">
-      <Link.MenuAction title="Copy" icon="doc.on.doc" onPress={() => {}} />
-      <Link.MenuAction
-        title="Delete"
-        icon="trash"
-        destructive
-        onPress={() => {}}
-      />
-    </Link.Menu>
-  </Link.Menu>
-</Link>;
-```
-
-## Link Previews
-
-Use link previews frequently to enhance navigation:
-
-```tsx
-<Link href="/settings">
-  <Link.Trigger>
-    <Pressable>
-      <Card />
-    </Pressable>
-  </Link.Trigger>
-  <Link.Preview />
-</Link>
-```
-
-Link preview can be used with context menus.
-
-## Modal
-
-Present a screen as a modal:
-
-```tsx
-<Stack.Screen name="modal" options={{ presentation: "modal" }} />
-```
-
-Prefer this to building a custom modal component.
-
-## Sheet
-
-Present a screen as a dynamic form sheet:
-
-```tsx
-<Stack.Screen
-  name="sheet"
-  options={{
-    presentation: "formSheet",
-    sheetGrabberVisible: true,
-    sheetAllowedDetents: [0.5, 1.0],
-    contentStyle: { backgroundColor: "transparent" },
-  }}
-/>
-```
-
-- Using `contentStyle: { backgroundColor: "transparent" }` makes the background liquid glass on iOS 26+.
-
-## Common route structure
-
-A standard app layout with tabs and stacks inside each tab:
-
-```
-app/
-  _layout.tsx — <NativeTabs />
-  (index,search)/
-    _layout.tsx — <Stack />
-    index.tsx — Main list
-    search.tsx — Search view
-```
-
-```tsx
-// app/_layout.tsx
-import { NativeTabs } from "expo-router/unstable-native-tabs";
-import { ThemeProvider, DarkTheme, DefaultTheme } from "expo-router/react-navigation";
-import { useColorScheme } from "react-native";
-
-export default function Layout() {
-  const colorScheme = useColorScheme();
-  return (
-    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-      <NativeTabs>
-        <NativeTabs.Trigger name="(index)">
-          <NativeTabs.Trigger.Icon sf="list.dash" md="list" />
-          <NativeTabs.Trigger.Label>Items</NativeTabs.Trigger.Label>
-        </NativeTabs.Trigger>
-        <NativeTabs.Trigger name="(search)" role="search" />
-      </NativeTabs>
-    </ThemeProvider>
-  );
-}
-```
-
-Create a shared group route so both tabs can push common screens:
-
-```tsx
-// app/(index,search)/_layout.tsx
-import { Stack } from "expo-router/stack";
-import { colors } from "@/theme/colors";
-
-export default function Layout({ segment }) {
-  const screen = segment.match(/\((.*)\)/)?.[1]!;
-  const titles: Record<string, string> = { index: "Items", search: "Search" };
-
-  return (
-    <Stack
-      screenOptions={{
-        headerTransparent: true,
-        headerShadowVisible: false,
-        headerLargeTitleShadowVisible: false,
-        headerLargeStyle: { backgroundColor: "transparent" },
-        headerTitleStyle: { color: colors.label },
-        headerLargeTitle: true,
-        headerBlurEffect: "none",
-        headerBackButtonDisplayMode: "minimal",
-      }}
-    >
-      <Stack.Screen name={screen} options={{ title: titles[screen] }} />
-      <Stack.Screen name="i/[id]" options={{ headerLargeTitle: false }} />
-    </Stack>
-  );
-}
-```
diff --git a/plugins/expo/skills/expo-examples/SKILL.md b/plugins/expo/skills/expo-examples/SKILL.md
@@ -89,6 +89,7 @@ When the user already has an app, **add only what the example introduces; never
 
 - Tailwind / NativeWind styling → `expo-tailwind-setup`
 - Native UI components → `building-native-ui`
+- Navigation and routing → `expo-router`
 - Authoring a native module → `expo-module`
 - Upgrade the SDK before adopting a latest-SDK example → `upgrading-expo`