[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M731E7PK7RN6PBY20R0D45A5":3,"skill-same:01M731E7PK7RN6PBY20R0D45A5":105},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":25,"commitSha":26,"skillDirectory":27,"forksCount":14,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":30,"ownerDescription":31,"updatedAt":32,"install":33,"resources":46},"01M731E7PK7RN6PBY20R0D45A5","building-native-ui",null,"Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.","robinebers\u002Fconverted-plugins","robinebers","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F16515780?v=4","01M7318JMKK82Q6F6746G0X2K2","Robin Ebers","01M7318JNBFN3J92Z54F9PF1VV",0,"MIT","https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002FSKILL.md",[],[],"2026-11-11 15:11:14",false,"---\nname: building-native-ui\ndescription: Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.\nversion: 1.0.1\nlicense: MIT\n---\n\n# Expo UI Guidelines\n\n## References\n\nConsult these resources as needed:\n\n```\nreferences\u002F\n  animations.md          Reanimated: entering, exiting, layout, scroll-driven, gestures\n  controls.md            Native iOS: Switch, Slider, SegmentedControl, DateTimePicker, Picker\n  form-sheet.md          Form sheets in expo-router: configuration, footers and background interaction.\n  gradients.md           CSS gradients via experimental_backgroundImage (New Arch only)\n  icons.md               SF Symbols via expo-image (sf: source), names, animations, weights\n  media.md               Camera, audio, video, and file saving\n  route-structure.md     Route conventions, dynamic routes, groups, folder organization\n  search.md              Search bar with headers, useSearch hook, filtering patterns\n  storage.md             SQLite, AsyncStorage, SecureStore\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  visual-effects.md      Blur (expo-blur) and liquid glass (expo-glass-effect)\n  webgpu-three.md        3D graphics, games, GPU visualizations with WebGPU and Three.js\n  zoom-transitions.md    Apple Zoom: fluid zoom transitions with Link.AppleZoom (iOS 18+)\n```\n\n## Running the App\n\n**CRITICAL: Always try Expo Go first before creating custom builds.**\n\nMost Expo apps work in Expo Go without any custom native code. Before running `npx expo run:ios` or `npx expo run:android`:\n\n1. **Start with Expo Go**: Run `npx expo start` and scan the QR code with Expo Go\n2. **Check if features work**: Test your app thoroughly in Expo Go\n3. **Only create custom builds when required** - see below\n\n### When Custom Builds Are Required\n\nYou need `npx expo run:ios\u002Fandroid` or `eas build` ONLY when using:\n\n- **Local Expo modules** (custom native code in `modules\u002F`)\n- **Apple targets** (widgets, app clips, extensions via `@bacons\u002Fapple-targets`)\n- **Third-party native modules** not included in Expo Go\n- **Custom native configuration** that can't be expressed in `app.json`\n\n### When Expo Go Works\n\nExpo Go supports a huge range of features out of the box:\n\n- All `expo-*` packages (camera, location, notifications, etc.)\n- Expo Router navigation\n- Most UI libraries (reanimated, gesture handler, etc.)\n- Push notifications, deep links, and more\n\n**If you're unsure, try Expo Go first.** Creating custom builds adds complexity, slower iteration, and requires Xcode\u002FAndroid Studio setup.\n\n## Code Style\n\n- Be cautious of unterminated strings. Ensure nested backticks are escaped; never forget to escape quotes correctly.\n- Always use import statements at the top of the file.\n- Always use kebab-case for file names, e.g. `comment-card.tsx`\n- Always remove old route files when moving or restructuring navigation\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 `.\u002Freferences\u002Froute-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 \"\u002F\", it may be inside a group route.\n\n## Library Preferences\n\n- Never use modules removed from React Native such as Picker, WebView, SafeAreaView, or AsyncStorage\n- Never use legacy expo-permissions\n- `expo-audio` not `expo-av`\n- `expo-video` not `expo-av`\n- `expo-image` with `source=\"sf:name\"` for SF Symbols, not `expo-symbols` or `@expo\u002Fvector-icons`\n- `react-native-safe-area-context` not react-native SafeAreaView\n- `process.env.EXPO_OS` not `Platform.OS`\n- `React.use` not `React.useContext`\n- `expo-image` Image component instead of intrinsic element `img`\n- `expo-glass-effect` for liquid glass backdrops\n\n## Responsiveness\n\n- Always wrap root component in a scroll view for responsiveness\n- Use `\u003CScrollView contentInsetAdjustmentBehavior=\"automatic\" \u002F>` instead of `\u003CSafeAreaView>` for smarter safe area insets\n- `contentInsetAdjustmentBehavior=\"automatic\"` should be applied to FlatList and SectionList as well\n- Use flexbox instead of Dimensions API\n- ALWAYS prefer `useWindowDimensions` over `Dimensions.get()` to measure screen size\n\n## Behavior\n\n- Use expo-haptics conditionally on iOS to make more delightful experiences\n- Use views with built-in haptics like `\u003CSwitch \u002F>` from React Native and `@react-native-community\u002Fdatetimepicker`\n- When a route belongs to a Stack, its first child should almost always be a ScrollView with `contentInsetAdjustmentBehavior=\"automatic\"` set\n- When adding a `ScrollView` to the page it should almost always be the first component inside the route component\n- Prefer `headerSearchBarOptions` in Stack.Screen options to add a search bar\n- Use the `\u003CText selectable \u002F>` prop on text containing data that could be copied\n- Consider formatting large numbers like 1.4M or 38k\n- Never use intrinsic elements like 'img' or 'div' unless in a webview or Expo DOM component\n\n# Styling\n\nFollow Apple Human Interface Guidelines.\n\n## General Styling Rules\n\n- Prefer flex gap over margin and padding styles\n- Prefer padding over margin where possible\n- Always account for safe area, either with stack headers, tabs, or ScrollView\u002FFlatList `contentInsetAdjustmentBehavior=\"automatic\"`\n- Ensure both top and bottom safe area insets are accounted for\n- Inline styles not StyleSheet.create unless reusing styles is faster\n- Add entering and exiting animations for state changes\n- Use `{ borderCurve: 'continuous' }` for rounded corners unless creating a capsule shape\n- ALWAYS use a navigation stack title instead of a custom text element on the page\n- When padding a ScrollView, use `contentContainerStyle` padding and gap instead of padding on the ScrollView itself (reduces clipping)\n- CSS and Tailwind are not supported - use inline styles\n\n## Text Styling\n\n- Add the `selectable` prop to every `\u003CText\u002F>` element displaying important data or error messages\n- Counters should use `{ fontVariant: 'tabular-nums' }` for alignment\n\n## Shadows\n\nUse CSS `boxShadow` style prop. NEVER use legacy React Native shadow or elevation styles.\n\n```tsx\n\u003CView style={{ boxShadow: \"0 1px 2px rgba(0, 0, 0, 0.05)\" }} \u002F>\n```\n\n'inset' shadows are supported.\n\n# Navigation\n\n## Link\n\nUse `\u003CLink href=\"\u002Fpath\" \u002F>` from 'expo-router' for navigation between routes.\n\n```tsx\nimport { Link } from 'expo-router';\n\n\u002F\u002F Basic link\n\u003CLink href=\"\u002Fpath\" \u002F>\n\n\u002F\u002F Wrapping custom components\n\u003CLink href=\"\u002Fpath\" asChild>\n  \u003CPressable>...\u003C\u002FPressable>\n\u003C\u002FLink>\n```\n\nWhenever possible, include a `\u003CLink.Preview>` to follow iOS conventions. Add context menus and previews frequently to enhance navigation.\n\n## Stack\n\n- ALWAYS use `_layout.tsx` files to define stacks\n- Use Stack from 'expo-router\u002Fstack' for native navigation stacks\n\n### Page Title\n\nSet the page title in Stack.Screen options:\n\n```tsx\n\u003CStack.Screen options={{ title: \"Home\" }} \u002F>\n```\n\n## Context Menus\n\nAdd long press context menus to Link components:\n\n```tsx\nimport { Link } from \"expo-router\";\n\n\u003CLink href=\"\u002Fsettings\" asChild>\n  \u003CLink.Trigger>\n    \u003CPressable>\n      \u003CCard \u002F>\n    \u003C\u002FPressable>\n  \u003C\u002FLink.Trigger>\n  \u003CLink.Menu>\n    \u003CLink.MenuAction\n      title=\"Share\"\n      icon=\"square.and.arrow.up\"\n      onPress={handleSharePress}\n    \u002F>\n    \u003CLink.MenuAction\n      title=\"Block\"\n      icon=\"nosign\"\n      destructive\n      onPress={handleBlockPress}\n    \u002F>\n    \u003CLink.Menu title=\"More\" icon=\"ellipsis\">\n      \u003CLink.MenuAction title=\"Copy\" icon=\"doc.on.doc\" onPress={() => {}} \u002F>\n      \u003CLink.MenuAction\n        title=\"Delete\"\n        icon=\"trash\"\n        destructive\n        onPress={() => {}}\n      \u002F>\n    \u003C\u002FLink.Menu>\n  \u003C\u002FLink.Menu>\n\u003C\u002FLink>;\n```\n\n## Link Previews\n\nUse link previews frequently to enhance navigation:\n\n```tsx\n\u003CLink href=\"\u002Fsettings\">\n  \u003CLink.Trigger>\n    \u003CPressable>\n      \u003CCard \u002F>\n    \u003C\u002FPressable>\n  \u003C\u002FLink.Trigger>\n  \u003CLink.Preview \u002F>\n\u003C\u002FLink>\n```\n\nLink preview can be used with context menus.\n\n## Modal\n\nPresent a screen as a modal:\n\n```tsx\n\u003CStack.Screen name=\"modal\" options={{ presentation: \"modal\" }} \u002F>\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\u003CStack.Screen\n  name=\"sheet\"\n  options={{\n    presentation: \"formSheet\",\n    sheetGrabberVisible: true,\n    sheetAllowedDetents: [0.5, 1.0],\n    contentStyle: { backgroundColor: \"transparent\" },\n  }}\n\u002F>\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\u002F\n  _layout.tsx — \u003CNativeTabs \u002F>\n  (index,search)\u002F\n    _layout.tsx — \u003CStack \u002F>\n    index.tsx — Main list\n    search.tsx — Search view\n```\n\n```tsx\n\u002F\u002F app\u002F_layout.tsx\nimport { NativeTabs, Icon, Label } from \"expo-router\u002Funstable-native-tabs\";\nimport { Theme } from \"..\u002Fcomponents\u002Ftheme\";\n\nexport default function Layout() {\n  return (\n    \u003CTheme>\n      \u003CNativeTabs>\n        \u003CNativeTabs.Trigger name=\"(index)\">\n          \u003CIcon sf=\"list.dash\" \u002F>\n          \u003CLabel>Items\u003C\u002FLabel>\n        \u003C\u002FNativeTabs.Trigger>\n        \u003CNativeTabs.Trigger name=\"(search)\" role=\"search\" \u002F>\n      \u003C\u002FNativeTabs>\n    \u003C\u002FTheme>\n  );\n}\n```\n\nCreate a shared group route so both tabs can push common screens:\n\n```tsx\n\u002F\u002F app\u002F(index,search)\u002F_layout.tsx\nimport { Stack } from \"expo-router\u002Fstack\";\nimport { PlatformColor } from \"react-native\";\n\nexport default function Layout({ segment }) {\n  const screen = segment.match(\u002F\\((.*)\\)\u002F)?.[1]!;\n  const titles: Record\u003Cstring, string> = { index: \"Items\", search: \"Search\" };\n\n  return (\n    \u003CStack\n      screenOptions={{\n        headerTransparent: true,\n        headerShadowVisible: false,\n        headerLargeTitleShadowVisible: false,\n        headerLargeStyle: { backgroundColor: \"transparent\" },\n        headerTitleStyle: { color: PlatformColor(\"label\") },\n        headerLargeTitle: true,\n        headerBlurEffect: \"none\",\n        headerBackButtonDisplayMode: \"minimal\",\n      }}\n    >\n      \u003CStack.Screen name={screen} options={{ title: titles[screen] }} \u002F>\n      \u003CStack.Screen name=\"i\u002F[id]\" options={{ headerLargeTitle: false }} \u002F>\n    \u003C\u002FStack>\n  );\n}\n```\n","# Expo UI Guidelines\n\n## References\n\nConsult these resources as needed:\n\n```\nreferences\u002F\n  animations.md          Reanimated: entering, exiting, layout, scroll-driven, gestures\n  controls.md            Native iOS: Switch, Slider, SegmentedControl, DateTimePicker, Picker\n  form-sheet.md          Form sheets in expo-router: configuration, footers and background interaction.\n  gradients.md           CSS gradients via experimental_backgroundImage (New Arch only)\n  icons.md               SF Symbols via expo-image (sf: source), names, animations, weights\n  media.md               Camera, audio, video, and file saving\n  route-structure.md     Route conventions, dynamic routes, groups, folder organization\n  search.md              Search bar with headers, useSearch hook, filtering patterns\n  storage.md             SQLite, AsyncStorage, SecureStore\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  visual-effects.md      Blur (expo-blur) and liquid glass (expo-glass-effect)\n  webgpu-three.md        3D graphics, games, GPU visualizations with WebGPU and Three.js\n  zoom-transitions.md    Apple Zoom: fluid zoom transitions with Link.AppleZoom (iOS 18+)\n```\n\n## Running the App\n\n**CRITICAL: Always try Expo Go first before creating custom builds.**\n\nMost Expo apps work in Expo Go without any custom native code. Before running `npx expo run:ios` or `npx expo run:android`:\n\n1. **Start with Expo Go**: Run `npx expo start` and scan the QR code with Expo Go\n2. **Check if features work**: Test your app thoroughly in Expo Go\n3. **Only create custom builds when required** - see below\n\n### When Custom Builds Are Required\n\nYou need `npx expo run:ios\u002Fandroid` or `eas build` ONLY when using:\n\n- **Local Expo modules** (custom native code in `modules\u002F`)\n- **Apple targets** (widgets, app clips, extensions via `@bacons\u002Fapple-targets`)\n- **Third-party native modules** not included in Expo Go\n- **Custom native configuration** that can't be expressed in `app.json`\n\n### When Expo Go Works\n\nExpo Go supports a huge range of features out of the box:\n\n- All `expo-*` packages (camera, location, notifications, etc.)\n- Expo Router navigation\n- Most UI libraries (reanimated, gesture handler, etc.)\n- Push notifications, deep links, and more\n\n**If you're unsure, try Expo Go first.** Creating custom builds adds complexity, slower iteration, and requires Xcode\u002FAndroid Studio setup.\n\n## Code Style\n\n- Be cautious of unterminated strings. Ensure nested backticks are escaped; never forget to escape quotes correctly.\n- Always use import statements at the top of the file.\n- Always use kebab-case for file names, e.g. `comment-card.tsx`\n- Always remove old route files when moving or restructuring navigation\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 `.\u002Freferences\u002Froute-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 \"\u002F\", it may be inside a group route.\n\n## Library Preferences\n\n- Never use modules removed from React Native such as Picker, WebView, SafeAreaView, or AsyncStorage\n- Never use legacy expo-permissions\n- `expo-audio` not `expo-av`\n- `expo-video` not `expo-av`\n- `expo-image` with `source=\"sf:name\"` for SF Symbols, not `expo-symbols` or `@expo\u002Fvector-icons`\n- `react-native-safe-area-context` not react-native SafeAreaView\n- `process.env.EXPO_OS` not `Platform.OS`\n- `React.use` not `React.useContext`\n- `expo-image` Image component instead of intrinsic element `img`\n- `expo-glass-effect` for liquid glass backdrops\n\n## Responsiveness\n\n- Always wrap root component in a scroll view for responsiveness\n- Use `\u003CScrollView contentInsetAdjustmentBehavior=\"automatic\" \u002F>` instead of `\u003CSafeAreaView>` for smarter safe area insets\n- `contentInsetAdjustmentBehavior=\"automatic\"` should be applied to FlatList and SectionList as well\n- Use flexbox instead of Dimensions API\n- ALWAYS prefer `useWindowDimensions` over `Dimensions.get()` to measure screen size\n\n## Behavior\n\n- Use expo-haptics conditionally on iOS to make more delightful experiences\n- Use views with built-in haptics like `\u003CSwitch \u002F>` from React Native and `@react-native-community\u002Fdatetimepicker`\n- When a route belongs to a Stack, its first child should almost always be a ScrollView with `contentInsetAdjustmentBehavior=\"automatic\"` set\n- When adding a `ScrollView` to the page it should almost always be the first component inside the route component\n- Prefer `headerSearchBarOptions` in Stack.Screen options to add a search bar\n- Use the `\u003CText selectable \u002F>` prop on text containing data that could be copied\n- Consider formatting large numbers like 1.4M or 38k\n- Never use intrinsic elements like 'img' or 'div' unless in a webview or Expo DOM component\n\n# Styling\n\nFollow Apple Human Interface Guidelines.\n\n## General Styling Rules\n\n- Prefer flex gap over margin and padding styles\n- Prefer padding over margin where possible\n- Always account for safe area, either with stack headers, tabs, or ScrollView\u002FFlatList `contentInsetAdjustmentBehavior=\"automatic\"`\n- Ensure both top and bottom safe area insets are accounted for\n- Inline styles not StyleSheet.create unless reusing styles is faster\n- Add entering and exiting animations for state changes\n- Use `{ borderCurve: 'continuous' }` for rounded corners unless creating a capsule shape\n- ALWAYS use a navigation stack title instead of a custom text element on the page\n- When padding a ScrollView, use `contentContainerStyle` padding and gap instead of padding on the ScrollView itself (reduces clipping)\n- CSS and Tailwind are not supported - use inline styles\n\n## Text Styling\n\n- Add the `selectable` prop to every `\u003CText\u002F>` element displaying important data or error messages\n- Counters should use `{ fontVariant: 'tabular-nums' }` for alignment\n\n## Shadows\n\nUse CSS `boxShadow` style prop. NEVER use legacy React Native shadow or elevation styles.\n\n```tsx\n\u003CView style={{ boxShadow: \"0 1px 2px rgba(0, 0, 0, 0.05)\" }} \u002F>\n```\n\n'inset' shadows are supported.\n\n# Navigation\n\n## Link\n\nUse `\u003CLink href=\"\u002Fpath\" \u002F>` from 'expo-router' for navigation between routes.\n\n```tsx\nimport { Link } from 'expo-router';\n\n\u002F\u002F Basic link\n\u003CLink href=\"\u002Fpath\" \u002F>\n\n\u002F\u002F Wrapping custom components\n\u003CLink href=\"\u002Fpath\" asChild>\n  \u003CPressable>...\u003C\u002FPressable>\n\u003C\u002FLink>\n```\n\nWhenever possible, include a `\u003CLink.Preview>` to follow iOS conventions. Add context menus and previews frequently to enhance navigation.\n\n## Stack\n\n- ALWAYS use `_layout.tsx` files to define stacks\n- Use Stack from 'expo-router\u002Fstack' for native navigation stacks\n\n### Page Title\n\nSet the page title in Stack.Screen options:\n\n```tsx\n\u003CStack.Screen options={{ title: \"Home\" }} \u002F>\n```\n\n## Context Menus\n\nAdd long press context menus to Link components:\n\n```tsx\nimport { Link } from \"expo-router\";\n\n\u003CLink href=\"\u002Fsettings\" asChild>\n  \u003CLink.Trigger>\n    \u003CPressable>\n      \u003CCard \u002F>\n    \u003C\u002FPressable>\n  \u003C\u002FLink.Trigger>\n  \u003CLink.Menu>\n    \u003CLink.MenuAction\n      title=\"Share\"\n      icon=\"square.and.arrow.up\"\n      onPress={handleSharePress}\n    \u002F>\n    \u003CLink.MenuAction\n      title=\"Block\"\n      icon=\"nosign\"\n      destructive\n      onPress={handleBlockPress}\n    \u002F>\n    \u003CLink.Menu title=\"More\" icon=\"ellipsis\">\n      \u003CLink.MenuAction title=\"Copy\" icon=\"doc.on.doc\" onPress={() => {}} \u002F>\n      \u003CLink.MenuAction\n        title=\"Delete\"\n        icon=\"trash\"\n        destructive\n        onPress={() => {}}\n      \u002F>\n    \u003C\u002FLink.Menu>\n  \u003C\u002FLink.Menu>\n\u003C\u002FLink>;\n```\n\n## Link Previews\n\nUse link previews frequently to enhance navigation:\n\n```tsx\n\u003CLink href=\"\u002Fsettings\">\n  \u003CLink.Trigger>\n    \u003CPressable>\n      \u003CCard \u002F>\n    \u003C\u002FPressable>\n  \u003C\u002FLink.Trigger>\n  \u003CLink.Preview \u002F>\n\u003C\u002FLink>\n```\n\nLink preview can be used with context menus.\n\n## Modal\n\nPresent a screen as a modal:\n\n```tsx\n\u003CStack.Screen name=\"modal\" options={{ presentation: \"modal\" }} \u002F>\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\u003CStack.Screen\n  name=\"sheet\"\n  options={{\n    presentation: \"formSheet\",\n    sheetGrabberVisible: true,\n    sheetAllowedDetents: [0.5, 1.0],\n    contentStyle: { backgroundColor: \"transparent\" },\n  }}\n\u002F>\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\u002F\n  _layout.tsx — \u003CNativeTabs \u002F>\n  (index,search)\u002F\n    _layout.tsx — \u003CStack \u002F>\n    index.tsx — Main list\n    search.tsx — Search view\n```\n\n```tsx\n\u002F\u002F app\u002F_layout.tsx\nimport { NativeTabs, Icon, Label } from \"expo-router\u002Funstable-native-tabs\";\nimport { Theme } from \"..\u002Fcomponents\u002Ftheme\";\n\nexport default function Layout() {\n  return (\n    \u003CTheme>\n      \u003CNativeTabs>\n        \u003CNativeTabs.Trigger name=\"(index)\">\n          \u003CIcon sf=\"list.dash\" \u002F>\n          \u003CLabel>Items\u003C\u002FLabel>\n        \u003C\u002FNativeTabs.Trigger>\n        \u003CNativeTabs.Trigger name=\"(search)\" role=\"search\" \u002F>\n      \u003C\u002FNativeTabs>\n    \u003C\u002FTheme>\n  );\n}\n```\n\nCreate a shared group route so both tabs can push common screens:\n\n```tsx\n\u002F\u002F app\u002F(index,search)\u002F_layout.tsx\nimport { Stack } from \"expo-router\u002Fstack\";\nimport { PlatformColor } from \"react-native\";\n\nexport default function Layout({ segment }) {\n  const screen = segment.match(\u002F\\((.*)\\)\u002F)?.[1]!;\n  const titles: Record\u003Cstring, string> = { index: \"Items\", search: \"Search\" };\n\n  return (\n    \u003CStack\n      screenOptions={{\n        headerTransparent: true,\n        headerShadowVisible: false,\n        headerLargeTitleShadowVisible: false,\n        headerLargeStyle: { backgroundColor: \"transparent\" },\n        headerTitleStyle: { color: PlatformColor(\"label\") },\n        headerLargeTitle: true,\n        headerBlurEffect: \"none\",\n        headerBackButtonDisplayMode: \"minimal\",\n      }}\n    >\n      \u003CStack.Screen name={screen} options={{ title: titles[screen] }} \u002F>\n      \u003CStack.Screen name=\"i\u002F[id]\" options={{ headerLargeTitle: false }} \u002F>\n    \u003C\u002FStack>\n  );\n}\n```\n",{"name":5,"license":15,"version":24,"description":7},"1.0.1","master","715e6da3692809696078ce763db8b831d3344c17","expo\u002Fskills\u002Fbuilding-native-ui","https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins","https:\u002F\u002Fgithub.com\u002Frobinebers","https:\u002F\u002Fitsbyrob.in\u002F0nfaWk6","After 20 years of engineering experience, I now teach non-technical professionals how to build with AI for their business, without writing code.","2026-05-17 22:42:46",{"source":8,"skillName":5,"commands":34,"prompt":44,"zipAvailable":45},[35,38,41],{"tool":36,"command":37},"npx","npx skills add robinebers\u002Fconverted-plugins --skill building-native-ui",{"tool":39,"command":40},"bunx","bunx skills add robinebers\u002Fconverted-plugins --skill building-native-ui",{"tool":42,"command":43},"pnpm","pnpm dlx skills add robinebers\u002Fconverted-plugins --skill building-native-ui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002FSKILL.md",true,[47,53,57,61,65,69,73,77,81,85,89,93,97,101],{"path":48,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":51,"sourceHtmlUrl":52},"references\u002Fanimations.md","REFERENCE","参考文档",4747,"https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002Freferences\u002Fanimations.md",{"path":54,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":55,"sourceHtmlUrl":56},"references\u002Fcontrols.md",5055,"https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002Freferences\u002Fcontrols.md",{"path":58,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":59,"sourceHtmlUrl":60},"references\u002Fform-sheet.md",6320,"https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002Freferences\u002Fform-sheet.md",{"path":62,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":63,"sourceHtmlUrl":64},"references\u002Fgradients.md",2717,"https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002Freferences\u002Fgradients.md",{"path":66,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":67,"sourceHtmlUrl":68},"references\u002Ficons.md",4771,"https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002Freferences\u002Ficons.md",{"path":70,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":71,"sourceHtmlUrl":72},"references\u002Fmedia.md",6196,"https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002Freferences\u002Fmedia.md",{"path":74,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":75,"sourceHtmlUrl":76},"references\u002Froute-structure.md",5106,"https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002Freferences\u002Froute-structure.md",{"path":78,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":79,"sourceHtmlUrl":80},"references\u002Fsearch.md",5193,"https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002Freferences\u002Fsearch.md",{"path":82,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":83,"sourceHtmlUrl":84},"references\u002Fstorage.md",2935,"https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002Freferences\u002Fstorage.md",{"path":86,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":87,"sourceHtmlUrl":88},"references\u002Ftabs.md",13308,"https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002Freferences\u002Ftabs.md",{"path":90,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":91,"sourceHtmlUrl":92},"references\u002Ftoolbar-and-headers.md",8061,"https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002Freferences\u002Ftoolbar-and-headers.md",{"path":94,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":95,"sourceHtmlUrl":96},"references\u002Fvisual-effects.md",4335,"https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002Freferences\u002Fvisual-effects.md",{"path":98,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":99,"sourceHtmlUrl":100},"references\u002Fwebgpu-three.md",14466,"https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002Freferences\u002Fwebgpu-three.md",{"path":102,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":103,"sourceHtmlUrl":104},"references\u002Fzoom-transitions.md",4848,"https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fexpo\u002Fskills\u002Fbuilding-native-ui\u002Freferences\u002Fzoom-transitions.md",[106,115,122,130,137,144],{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":110,"licenseFileUrl":111,"sourceHtmlUrl":112,"categories":113,"keywords":114,"publishedAt":19},"01M7321C2662D7YKBCY83J24KP","android-emulator-qa","Use when validating Android feature flows in an emulator with adb-driven launch, input, UI-tree inspection, screenshots, and logcat capture.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Ftest-android-apps\u002Fskills\u002Fandroid-emulator-qa\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Ftest-android-apps\u002Fskills\u002Fandroid-emulator-qa\u002FSKILL.md",[],[],{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":19},"01M731Z5HDY99JTV2Q7VPGC67T","supabase-postgres-best-practices","Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.","https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fsupabase\u002Fskills\u002Fsupabase-postgres-best-practices\u002FSKILL.md",[],[],{"skillNo":123,"name":124,"nameZh":6,"description":125,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":110,"licenseFileUrl":126,"sourceHtmlUrl":127,"categories":128,"keywords":129,"publishedAt":19},"01M731XSMVAYTRJHF91Y8JH186","sentry","Use when the user asks to inspect Sentry issues or events, summarize recent production errors, or pull basic Sentry health data via the Sentry API; perform read-only queries with the bundled script and require `SENTRY_AUTH_TOKEN`.","https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fsentry\u002Fskills\u002Fsentry\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Fsentry\u002Fskills\u002Fsentry\u002FSKILL.md",[],[],{"skillNo":131,"name":132,"nameZh":6,"description":133,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":134,"categories":135,"keywords":136,"publishedAt":19},"01M731XMZSY49WBC30T15PGXN4","render-workflows","Sets up, develops, tests, and deploys Render Workflows. Covers first-time scaffolding (via CLI or manual), SDK installation (Python or TypeScript), task patterns (retries, subtasks, fan-out), local development, Dashboard deployment, and troubleshooting. Use when a user wants to set up Render Workflows for the first time, scaffold a workflow service, add or modify workflow tasks, test workflows locally, or deploy workflows to Render.","https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Frender\u002Fskills\u002Frender-workflows\u002FSKILL.md",[],[],{"skillNo":138,"name":139,"nameZh":6,"description":140,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":141,"categories":142,"keywords":143,"publishedAt":19},"01M731XHKRABCVRT7BMKG9GSXQ","render-monitor","Monitor Render services in real-time. Check health, performance metrics, logs, and resource usage. Use when users want to check service status, view metrics, monitor performance, or verify deployments are healthy.","https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Frender\u002Fskills\u002Frender-monitor\u002FSKILL.md",[],[],{"skillNo":145,"name":146,"nameZh":6,"description":147,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":148,"categories":149,"keywords":150,"publishedAt":19},"01M731XCK67X28E3GAE6GMPK51","render-migrate-from-heroku","Migrate from Heroku to Render by reading local project files and generating equivalent Render services. Triggers: any mention of migrating from Heroku, moving off Heroku, Heroku to Render migration, or switching from Heroku. Reads Procfile, dependency files, and app config from the local repo. Optionally uses Heroku MCP to enrich with live config vars, add-on details, and dyno sizes. Uses Render MCP or Blueprint YAML to create services.","https:\u002F\u002Fgithub.com\u002Frobinebers\u002Fconverted-plugins\u002Fblob\u002Fmaster\u002Frender\u002Fskills\u002Frender-migrate-from-heroku\u002FSKILL.md",[],[]]