[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DVPKC8FPE072YYVE8YMFES":3,"skill-same:01M6DVPKC8FPE072YYVE8YMFES":67},{"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":23,"publishedAt":35,"linkOnly":36,"markdownContent":37,"markdownBody":38,"frontMatter":39,"refName":41,"commitSha":42,"skillDirectory":43,"forksCount":14,"repositoryHtmlUrl":44,"repositoryHomepageUrl":6,"ownerHtmlUrl":45,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":46,"install":47,"resources":60},"01M6DVPKC8FPE072YYVE8YMFES","building-native-ui",null,"Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.","jorcan\u002Fautomejora_agentes","jorcan","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F8596852?v=4","01M6DT7BAXE6DVCN3KAFEYDWY4","Jorge","01M6DT7BG5YN4062DGJHYWPDJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fjorcan\u002Fautomejora_agentes\u002Fblob\u002Fmain\u002Factive_skills\u002Fbuilding_native_ui\u002Fskill.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[24,25,26,27,28,29,30,31,32,33,34],"building native ui","ui","components","guide","router","styling","navigation","expo","patterns","apps","complete","2026-11-10 10:12:30",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":40,"description":7},"1.0.1","main","6cd7923a48095f3a1418526e9999f3453c2d9bcb","active_skills\u002Fbuilding_native_ui","https:\u002F\u002Fgithub.com\u002Fjorcan\u002Fautomejora_agentes","https:\u002F\u002Fgithub.com\u002Fjorcan","2026-03-15 16:52:58",{"source":8,"skillName":5,"commands":48,"prompt":58,"zipAvailable":59},[49,52,55],{"tool":50,"command":51},"npx","npx skills add jorcan\u002Fautomejora_agentes --skill building-native-ui",{"tool":53,"command":54},"bunx","bunx skills add jorcan\u002Fautomejora_agentes --skill building-native-ui",{"tool":56,"command":57},"pnpm","pnpm dlx skills add jorcan\u002Fautomejora_agentes --skill building-native-ui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fjorcan\u002Fautomejora_agentes\u002Fblob\u002Fmain\u002Factive_skills\u002Fbuilding_native_ui\u002Fskill.md",true,[61],{"path":62,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":65,"sourceHtmlUrl":66},"evals.json","REFERENCE","参考文档",186,"https:\u002F\u002Fgithub.com\u002Fjorcan\u002Fautomejora_agentes\u002Fblob\u002Fmain\u002Factive_skills\u002Fbuilding_native_ui\u002Fevals.json",[68,100,131,152,179,195],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":79,"publishedAt":35},"01M6E03VK41P0WJH78DYBPXS34","skill-check","Validate Claude Code skills against the agentskills specification. Catches structural, semantic, and naming issues before users do.","https:\u002F\u002Fgithub.com\u002Fjorcan\u002Fautomejora_agentes\u002Fblob\u002Fmain\u002Factive_skills\u002Fskill_check\u002Fskill.md",[74],{"categoryNo":75,"categoryName":76,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99],"skill check","check","cli","codex","linter","free","structural","windsurf","do","specification","cursor","read","github","quality","code-quality","https","issues","code","development","claude code skills",{"skillNo":101,"name":102,"nameZh":6,"description":103,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":113,"publishedAt":35},"01M6DZTSZDZ17VJTZ3RP7V1BMK","scientific-writing","Core skill for the deep research and writing tool. Write scientific manuscripts in full paragraphs (never bullet points). Use two-stage process with (1) section outlines with key points using research-lookup then (2) convert to flowing prose. IMRAD...","https:\u002F\u002Fgithub.com\u002Fjorcan\u002Fautomejora_agentes\u002Fblob\u002Fmain\u002Factive_skills\u002Fscientific_writing\u002Fskill.md",[106,109,110],{"categoryNo":107,"categoryName":108,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":75,"categoryName":76,"taxonomyType":77,"taxonomyTypeDesc":78},{"categoryNo":111,"categoryName":112,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000036","内容创作者",[114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130],"scientific writing","writing","convert","stage","full","deep","prose","never","use","process","write","tool","lookup","Outlines","deep research","core","research",{"skillNo":132,"name":133,"nameZh":6,"description":134,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":135,"categories":136,"keywords":140,"publishedAt":35},"01M6DZA3WPEGYMAMH1MGB7SFZZ","plotly","Interactive visualization library. Use when you need hover info, zoom, pan, or web-embeddable charts. Best for dashboards, exploratory analysis, and presentations. For static publication figures use matplotlib or scientific-visualization.","https:\u002F\u002Fgithub.com\u002Fjorcan\u002Fautomejora_agentes\u002Fblob\u002Fmain\u002Factive_skills\u002Fplotly\u002Fskill.md",[137],{"categoryNo":138,"categoryName":139,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000013","分析与可视化",[133,141,142,122,143,144,145,146,147,148,149,150,151],"info","visualization","interactive","dashboards","Charts","matplotlib","analysis","library","presentations","hover","web",{"skillNo":153,"name":154,"nameZh":6,"description":155,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":156,"categories":157,"keywords":164,"publishedAt":35},"01M6DYQQZV94JHASHJGH8WFC8Y","native-data-fetching","Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (useLoaderData).","https:\u002F\u002Fgithub.com\u002Fjorcan\u002Fautomejora_agentes\u002Fblob\u002Fmain\u002Factive_skills\u002Fnative_data_fetching\u002Fskill.md",[158,161],{"categoryNo":159,"categoryName":160,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":162,"categoryName":163,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000033","数据分析师",[165,166,167,168,169,170,171,172,173,122,174,175,176,177,178,31,28],"data","native data fetching","debugging","fetch","api","network","swr","offline","error handling","react","support","caching","query","call",{"skillNo":180,"name":181,"nameZh":6,"description":182,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":183,"categories":184,"keywords":186,"publishedAt":35},"01M6DX0PE6TR5PXKGNT8MK9FGH","expo-tailwind-setup","Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling","https:\u002F\u002Fgithub.com\u002Fjorcan\u002Fautomejora_agentes\u002Fblob\u002Fmain\u002Factive_skills\u002Fexpo_tailwind_setup\u002Fskill.md",[185],{"categoryNo":159,"categoryName":160,"taxonomyType":77,"taxonomyTypeDesc":78},[31,187,188,189,190,191,174,192,29,193,194],"Tailwind","setup","expo tailwind setup","css","Tailwind CSS","react-native","up","SET",{"skillNo":196,"name":197,"nameZh":6,"description":198,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":199,"categories":200,"keywords":201,"publishedAt":35},"01M6DX0KXRW3H0M2Q7CQMB0ZA4","expo-dev-client","Build and distribute Expo development clients locally or via TestFlight","https:\u002F\u002Fgithub.com\u002Fjorcan\u002Fautomejora_agentes\u002Fblob\u002Fmain\u002Factive_skills\u002Fexpo_dev_client\u002Fskill.md",[],[202,31,203,98,204,205,206],"dev","expo dev client","via","distribute","build"]