{ "schemaVersion": "1.0", "item": { "slug": "native-ui", "name": "Native UI", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/wpank/native-ui", "canonicalUrl": "https://clawhub.ai/wpank/native-ui", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/native-ui", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=native-ui", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "README.md", "SKILL.md", "references/storage.md", "references/search.md", "references/toolbar-and-headers.md", "references/route-structure.md" ], "primaryDoc": "SKILL.md", "quickSetup": [ "Download the package from Yavira.", "Extract the archive and review SKILL.md first.", "Import or place the package into your OpenClaw setup." ], "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "Download the package from Yavira.", "Extract it into a folder your agent can access.", "Paste one of the prompts below and point your agent at the extracted folder." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run." } ] }, "sourceHealth": { "source": "tencent", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-30T16:55:25.780Z", "expiresAt": "2026-05-07T16:55:25.780Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network", "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null }, "scope": "source", "summary": "Source download looks usable.", "detail": "Yavira can redirect you to the upstream package for this source.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/native-ui" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] }, "downloadPageUrl": "https://openagent3.xyz/downloads/native-ui", "agentPageUrl": "https://openagent3.xyz/skills/native-ui/agent", "manifestUrl": "https://openagent3.xyz/skills/native-ui/agent.json", "briefUrl": "https://openagent3.xyz/skills/native-ui/agent.md" }, "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "Download the package from Yavira.", "Extract it into a folder your agent can access.", "Paste one of the prompts below and point your agent at the extracted folder." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run." } ] }, "documentation": { "source": "clawhub", "primaryDoc": "SKILL.md", "sections": [ { "title": "Native UI with Expo Router", "body": "Patterns and conventions for building native mobile applications with Expo Router and React Native." }, { "title": "References", "body": "Consult these as needed:\n\n./references/route-structure.md — Route conventions, dynamic routes, groups, folder organization\n./references/tabs.md — Native tab bar with NativeTabs, iOS 26 features\n./references/icons.md — SF Symbols with expo-symbols, icon names, animations, weights\n./references/controls.md — Native iOS controls: Switch, Slider, SegmentedControl, DateTimePicker\n./references/visual-effects.md — Blur effects (expo-blur) and liquid glass (expo-glass-effect)\n./references/animations.md — Reanimated: entering, exiting, layout, scroll-driven, gestures\n./references/search.md — Search bar with headers, useSearch hook, filtering patterns\n./references/gradients.md — CSS gradients via experimental_backgroundImage (New Architecture only)\n./references/media.md — Camera, audio, video, file saving\n./references/storage.md — SQLite, AsyncStorage, SecureStore\n./references/webgpu-three.md — 3D graphics and GPU visualizations with WebGPU/Three.js\n./references/toolbar-and-headers.md — Stack headers and toolbar with buttons, menus, search bars (iOS)\n./references/form-sheet.md — Form sheet presentation patterns" }, { "title": "Running the App", "body": "Always try Expo Go first before creating custom builds.\n\nStart with npx expo start and scan the QR code\nTest features in Expo Go\nOnly create custom builds when required" }, { "title": "When Custom Builds Are Required", "body": "Use npx expo run:ios/android or eas build only for:\n\nLocal Expo modules (custom native code in modules/)\nApple targets (widgets, app clips via @bacons/apple-targets)\nThird-party native modules not in Expo Go\nCustom native configuration beyond app.json\n\nExpo Go supports all expo-* packages, Expo Router, Reanimated, Gesture Handler, push notifications, and deep links out of the box." }, { "title": "OpenClaw / Moltbot / Clawbot", "body": "npx clawhub@latest install native-ui" }, { "title": "Code Style", "body": "Escape nested backticks and quotes correctly\nAlways use import statements at the top of the file\nUse kebab-case for file names: comment-card.tsx\nRemove old route files when restructuring navigation\nNo special characters in file names\nConfigure tsconfig.json path aliases; prefer aliases over relative imports" }, { "title": "Routes", "body": "See ./references/route-structure.md for detailed conventions.\n\nRoutes belong in the app directory\nNever co-locate components, types, or utilities in app/ — this is an anti-pattern\nAlways have a route matching /, possibly inside a group route" }, { "title": "Library Preferences", "body": "UseInstead ofexpo-audioexpo-avexpo-videoexpo-avexpo-symbols@expo/vector-iconsreact-native-safe-area-contextRN SafeAreaViewprocess.env.EXPO_OSPlatform.OSReact.useReact.useContextexpo-imageIntrinsic img elementexpo-glass-effectCustom glass backdrops\n\nNever use deprecated modules: Picker, WebView, SafeAreaView, AsyncStorage (from RN core), or legacy expo-permissions." }, { "title": "Responsiveness", "body": "Wrap root components in a scroll view\nUse instead of \nApply contentInsetAdjustmentBehavior=\"automatic\" to FlatList and SectionList too\nUse flexbox instead of Dimensions API\nPrefer useWindowDimensions over Dimensions.get() for screen measurement" }, { "title": "Behavior", "body": "Use expo-haptics conditionally on iOS for delightful interactions\nUse views with built-in haptics (, @react-native-community/datetimepicker)\nFirst child of a Stack route should almost always be a ScrollView with contentInsetAdjustmentBehavior=\"automatic\"\nPrefer headerSearchBarOptions in Stack.Screen options for search bars\nUse on data that users may want to copy\nFormat large numbers: 1.4M, 38k\nNever use intrinsic elements (img, div) outside webviews or Expo DOM components" }, { "title": "Styling", "body": "Follow Apple Human Interface Guidelines." }, { "title": "General Rules", "body": "Prefer flex gap over margin and padding\nPrefer padding over margin\nAlways account for safe area via stack headers, tabs, or contentInsetAdjustmentBehavior=\"automatic\"\nEnsure both top and bottom safe area insets are handled\nInline styles preferred over StyleSheet.create unless reusing styles\nAdd entering/exiting animations for state changes\nUse { borderCurve: 'continuous' } for rounded corners (not capsule shapes)\nUse navigation stack title instead of custom text headers\nOn ScrollView, use contentContainerStyle for padding/gap (avoids clipping)\nCSS and Tailwind are not supported — use inline styles" }, { "title": "Text Styling", "body": "Add selectable prop to elements showing important data or errors\nUse { fontVariant: 'tabular-nums' } on counters for alignment" }, { "title": "Shadows", "body": "Use CSS boxShadow style prop. Never use legacy RN shadow or elevation styles.\n\n\n\nInset shadows are supported." }, { "title": "Link", "body": "Use from expo-router for navigation.\n\nimport { Link } from 'expo-router';\n\n\n\n\n ...\n\n\nInclude whenever possible to follow iOS conventions. Add context menus and previews frequently." }, { "title": "Stack", "body": "Always use _layout.tsx files to define stacks\nUse Stack from expo-router/stack for native navigation stacks\nSet page titles in Stack.Screen options: options={{ title: \"Home\" }}" }, { "title": "Context Menus", "body": "Add long-press context menus to Link components:\n\n\n \n \n \n \n \n \n \n {}} />\n {}} />\n \n \n" }, { "title": "Link Previews", "body": "\n \n \n \n \n\n\nCan be combined with context menus." }, { "title": "Modal", "body": "Present a screen as a modal:\n\n\n\nPrefer this over custom modal components." }, { "title": "Sheet", "body": "Present as a dynamic form sheet:\n\n\n\ncontentStyle: { backgroundColor: \"transparent\" } enables liquid glass on iOS 26+." }, { "title": "Common Route Structure", "body": "Standard app layout with tabs and stacks:\n\napp/\n _layout.tsx — \n (index,search)/\n _layout.tsx — \n index.tsx — Main list\n search.tsx — Search view\n\nRoot layout:\n\n// app/_layout.tsx\nimport { NativeTabs, Icon, Label } from \"expo-router/unstable-native-tabs\";\nimport { Theme } from \"../components/theme\";\n\nexport default function Layout() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n\nShared group layout:\n\n// app/(index,search)/_layout.tsx\nimport { Stack } from \"expo-router/stack\";\nimport { PlatformColor } from \"react-native\";\n\nexport default function Layout({ segment }) {\n const screen = segment.match(/\\((.*)\\)/)?.[1]!;\n const titles: Record = { index: \"Items\", search: \"Search\" };\n\n return (\n \n \n \n \n );\n}" } ], "body": "Native UI with Expo Router\n\nPatterns and conventions for building native mobile applications with Expo Router and React Native.\n\nReferences\n\nConsult these as needed:\n\n./references/route-structure.md — Route conventions, dynamic routes, groups, folder organization\n./references/tabs.md — Native tab bar with NativeTabs, iOS 26 features\n./references/icons.md — SF Symbols with expo-symbols, icon names, animations, weights\n./references/controls.md — Native iOS controls: Switch, Slider, SegmentedControl, DateTimePicker\n./references/visual-effects.md — Blur effects (expo-blur) and liquid glass (expo-glass-effect)\n./references/animations.md — Reanimated: entering, exiting, layout, scroll-driven, gestures\n./references/search.md — Search bar with headers, useSearch hook, filtering patterns\n./references/gradients.md — CSS gradients via experimental_backgroundImage (New Architecture only)\n./references/media.md — Camera, audio, video, file saving\n./references/storage.md — SQLite, AsyncStorage, SecureStore\n./references/webgpu-three.md — 3D graphics and GPU visualizations with WebGPU/Three.js\n./references/toolbar-and-headers.md — Stack headers and toolbar with buttons, menus, search bars (iOS)\n./references/form-sheet.md — Form sheet presentation patterns\nRunning the App\n\nAlways try Expo Go first before creating custom builds.\n\nStart with npx expo start and scan the QR code\nTest features in Expo Go\nOnly create custom builds when required\nWhen Custom Builds Are Required\n\nUse npx expo run:ios/android or eas build only for:\n\nLocal Expo modules (custom native code in modules/)\nApple targets (widgets, app clips via @bacons/apple-targets)\nThird-party native modules not in Expo Go\nCustom native configuration beyond app.json\n\nExpo Go supports all expo-* packages, Expo Router, Reanimated, Gesture Handler, push notifications, and deep links out of the box.\n\nInstallation\nOpenClaw / Moltbot / Clawbot\nnpx clawhub@latest install native-ui\n\nCode Style\nEscape nested backticks and quotes correctly\nAlways use import statements at the top of the file\nUse kebab-case for file names: comment-card.tsx\nRemove old route files when restructuring navigation\nNo special characters in file names\nConfigure tsconfig.json path aliases; prefer aliases over relative imports\nRoutes\n\nSee ./references/route-structure.md for detailed conventions.\n\nRoutes belong in the app directory\nNever co-locate components, types, or utilities in app/ — this is an anti-pattern\nAlways have a route matching /, possibly inside a group route\nLibrary Preferences\nUse\tInstead of\nexpo-audio\texpo-av\nexpo-video\texpo-av\nexpo-symbols\t@expo/vector-icons\nreact-native-safe-area-context\tRN SafeAreaView\nprocess.env.EXPO_OS\tPlatform.OS\nReact.use\tReact.useContext\nexpo-image\tIntrinsic img element\nexpo-glass-effect\tCustom glass backdrops\n\nNever use deprecated modules: Picker, WebView, SafeAreaView, AsyncStorage (from RN core), or legacy expo-permissions.\n\nResponsiveness\nWrap root components in a scroll view\nUse instead of \nApply contentInsetAdjustmentBehavior=\"automatic\" to FlatList and SectionList too\nUse flexbox instead of Dimensions API\nPrefer useWindowDimensions over Dimensions.get() for screen measurement\nBehavior\nUse expo-haptics conditionally on iOS for delightful interactions\nUse views with built-in haptics (, @react-native-community/datetimepicker)\nFirst child of a Stack route should almost always be a ScrollView with contentInsetAdjustmentBehavior=\"automatic\"\nPrefer headerSearchBarOptions in Stack.Screen options for search bars\nUse on data that users may want to copy\nFormat large numbers: 1.4M, 38k\nNever use intrinsic elements (img, div) outside webviews or Expo DOM components\nStyling\n\nFollow Apple Human Interface Guidelines.\n\nGeneral Rules\nPrefer flex gap over margin and padding\nPrefer padding over margin\nAlways account for safe area via stack headers, tabs, or contentInsetAdjustmentBehavior=\"automatic\"\nEnsure both top and bottom safe area insets are handled\nInline styles preferred over StyleSheet.create unless reusing styles\nAdd entering/exiting animations for state changes\nUse { borderCurve: 'continuous' } for rounded corners (not capsule shapes)\nUse navigation stack title instead of custom text headers\nOn ScrollView, use contentContainerStyle for padding/gap (avoids clipping)\nCSS and Tailwind are not supported — use inline styles\nText Styling\nAdd selectable prop to elements showing important data or errors\nUse { fontVariant: 'tabular-nums' } on counters for alignment\nShadows\n\nUse CSS boxShadow style prop. Never use legacy RN shadow or elevation styles.\n\n\n\n\nInset shadows are supported.\n\nNavigation\nLink\n\nUse from expo-router for navigation.\n\nimport { Link } from 'expo-router';\n\n\n\n\n ...\n\n\n\nInclude whenever possible to follow iOS conventions. Add context menus and previews frequently.\n\nStack\nAlways use _layout.tsx files to define stacks\nUse Stack from expo-router/stack for native navigation stacks\nSet page titles in Stack.Screen options: options={{ title: \"Home\" }}\nContext Menus\n\nAdd long-press context menus to Link components:\n\n\n \n \n \n \n \n \n \n {}} />\n {}} />\n \n \n\n\nLink Previews\n\n \n \n \n \n\n\n\nCan be combined with context menus.\n\nModal\n\nPresent a screen as a modal:\n\n\n\n\nPrefer this over custom modal components.\n\nSheet\n\nPresent as a dynamic form sheet:\n\n\n\n\ncontentStyle: { backgroundColor: \"transparent\" } enables liquid glass on iOS 26+.\n\nCommon Route Structure\n\nStandard app layout with tabs and stacks:\n\napp/\n _layout.tsx — \n (index,search)/\n _layout.tsx — \n index.tsx — Main list\n search.tsx — Search view\n\n\nRoot layout:\n\n// app/_layout.tsx\nimport { NativeTabs, Icon, Label } from \"expo-router/unstable-native-tabs\";\nimport { Theme } from \"../components/theme\";\n\nexport default function Layout() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n\n\nShared group layout:\n\n// app/(index,search)/_layout.tsx\nimport { Stack } from \"expo-router/stack\";\nimport { PlatformColor } from \"react-native\";\n\nexport default function Layout({ segment }) {\n const screen = segment.match(/\\((.*)\\)/)?.[1]!;\n const titles: Record = { index: \"Items\", search: \"Search\" };\n\n return (\n \n \n \n \n );\n}" }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/wpank/native-ui", "publisherUrl": "https://clawhub.ai/wpank/native-ui", "owner": "wpank", "version": "1.0.0", "license": null, "verificationStatus": "Indexed source record" }, "links": { "detailUrl": "https://openagent3.xyz/skills/native-ui", "downloadUrl": "https://openagent3.xyz/downloads/native-ui", "agentUrl": "https://openagent3.xyz/skills/native-ui/agent", "manifestUrl": "https://openagent3.xyz/skills/native-ui/agent.json", "briefUrl": "https://openagent3.xyz/skills/native-ui/agent.md" } }