{
"schemaVersion": "1.0",
"item": {
"slug": "expo-native-ui",
"name": "Expor Native UI",
"source": "tencent",
"type": "skill",
"category": "开发工具",
"sourceUrl": "https://clawhub.ai/wpank/expo-native-ui",
"canonicalUrl": "https://clawhub.ai/wpank/expo-native-ui",
"targetPlatform": "OpenClaw"
},
"install": {
"downloadMode": "redirect",
"downloadUrl": "/downloads/expo-native-ui",
"sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=expo-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/expo-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/expo-native-ui",
"agentPageUrl": "https://openagent3.xyz/skills/expo-native-ui/agent",
"manifestUrl": "https://openagent3.xyz/skills/expo-native-ui/agent.json",
"briefUrl": "https://openagent3.xyz/skills/expo-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": "Expo Native UI",
"body": "Build production-quality native mobile apps with Expo Router following Apple Human Interface Guidelines and modern React Native patterns."
},
{
"title": "OpenClaw / Moltbot / Clawbot",
"body": "npx clawhub@latest install expo-native-ui"
},
{
"title": "WHAT This Skill Does",
"body": "Guides implementation of native mobile apps using Expo Router with:\n\nFile-based routing with native navigation stacks\nNative tab bars (NativeTabs) and iOS 26 features\nSF Symbols integration via expo-symbols\nBlur effects (expo-blur) and liquid glass (expo-glass-effect)\nReanimated animations and gesture handling\nNative controls: Switch, Slider, SegmentedControl, DateTimePicker"
},
{
"title": "WHEN To Use",
"body": "Building a new Expo Router app\nAdding native tab navigation\nImplementing iOS-style blur or liquid glass effects\nCreating smooth animations with entering/exiting transitions\nIntegrating SF Symbols for icons\nSetting up route structure with groups and dynamic routes"
},
{
"title": "KEYWORDS",
"body": "expo router, react native, native tabs, sf symbols, expo blur, liquid glass, reanimated, ios, android, mobile app, navigation stack, form sheet, modal, context menu, link preview"
},
{
"title": "References",
"body": "Consult these resources for detailed implementation:\n\nReferencePurposereferences/route-structure.mdRoute conventions, dynamic routes, groups, query paramsreferences/tabs.mdNativeTabs, migration from JS tabs, iOS 26 featuresreferences/icons.mdSF Symbols with expo-symbols, animations, weightsreferences/controls.mdNative iOS controls: Switch, Slider, DateTimePicker, Pickerreferences/visual-effects.mdBlur effects and liquid glassreferences/animations.mdReanimated: entering, exiting, layout, scroll-drivenreferences/search.mdSearch bar integration, useSearch hook, filteringreferences/gradients.mdCSS gradients via experimental_backgroundImagereferences/media.mdCamera, audio, video, file savingreferences/storage.mdSQLite, AsyncStorage, SecureStorereferences/webgpu-three.mdWebGPU, Three.js for 3D graphicsreferences/toolbar-and-headers.mdStack headers, toolbar customization (iOS)"
},
{
"title": "Running the App",
"body": "Try Expo Go first before creating custom builds:\n\nnpx expo start # Scan QR with Expo Go\n\nCustom builds (npx expo run:ios) only needed 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"
},
{
"title": "Code Style",
"body": "Kebab-case file names: comment-card.tsx\nPath aliases in tsconfig over relative imports\nNever co-locate components/utilities in app/ directory\nAlways ensure a route matches \"/\" (may be in a group)\nEscape nested backticks carefully in strings"
},
{
"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 blur views"
},
{
"title": "Responsiveness",
"body": "// Always wrap root in ScrollView with automatic insets\n\n {children}\n\n\n// Use useWindowDimensions, not Dimensions.get()\nconst { width, height } = useWindowDimensions();\n\n// Flexbox over Dimensions API\n"
},
{
"title": "Link with Preview and Context Menu",
"body": "import { Link } from 'expo-router';\n\n\n \n \n \n \n \n \n \n \n"
},
{
"title": "Form Sheet Modal",
"body": "// In _layout.tsx\n"
},
{
"title": "Native Tabs Structure",
"body": "app/\n _layout.tsx — \n (index,search)/\n _layout.tsx — \n index.tsx\n search.tsx\n\n// app/_layout.tsx\nimport { NativeTabs, Icon, Label } from \"expo-router/unstable-native-tabs\";\n\nexport default function Layout() {\n return (\n \n \n \n \n \n \n \n );\n}"
},
{
"title": "Styling Guidelines",
"body": "Flex gap over margin/padding where possible\nborderCurve: 'continuous' for rounded corners (not capsules)\nboxShadow style prop, never legacy RN shadow/elevation\nStack title instead of custom text elements for page headers\nInline styles, not StyleSheet.create unless reusing\nfontVariant: 'tabular-nums' for numeric counters\nselectable prop on Text displaying copiable data\n\n// Shadow example\n\n\n// Continuous border curve\n"
},
{
"title": "Behavior Patterns",
"body": "Haptics: Use expo-haptics conditionally on iOS\nSearch bar: Prefer headerSearchBarOptions in Stack.Screen\nSelectable text: Add selectable prop to important data\nFormat large numbers: 1.4M, 38k instead of 1,400,000\nNever use intrinsic elements (img, div) outside DOM components"
},
{
"title": "NEVER Do",
"body": "NEVER use legacy modules: Picker, WebView, SafeAreaView from react-native, AsyncStorage (old), expo-permissions\nNEVER use Dimensions.get() — always useWindowDimensions\nNEVER co-locate components in the app/ directory\nNEVER use Platform.OS — use process.env.EXPO_OS\nNEVER use legacy shadow styles — use CSS boxShadow\nNEVER start with custom builds — try Expo Go first\nNEVER use StyleSheet.create for one-time styles\nNEVER use @expo/vector-icons — use expo-symbols"
}
],
"body": "Expo Native UI\n\nBuild production-quality native mobile apps with Expo Router following Apple Human Interface Guidelines and modern React Native patterns.\n\nInstallation\nOpenClaw / Moltbot / Clawbot\nnpx clawhub@latest install expo-native-ui\n\nWHAT This Skill Does\n\nGuides implementation of native mobile apps using Expo Router with:\n\nFile-based routing with native navigation stacks\nNative tab bars (NativeTabs) and iOS 26 features\nSF Symbols integration via expo-symbols\nBlur effects (expo-blur) and liquid glass (expo-glass-effect)\nReanimated animations and gesture handling\nNative controls: Switch, Slider, SegmentedControl, DateTimePicker\nWHEN To Use\nBuilding a new Expo Router app\nAdding native tab navigation\nImplementing iOS-style blur or liquid glass effects\nCreating smooth animations with entering/exiting transitions\nIntegrating SF Symbols for icons\nSetting up route structure with groups and dynamic routes\nKEYWORDS\n\nexpo router, react native, native tabs, sf symbols, expo blur, liquid glass, reanimated, ios, android, mobile app, navigation stack, form sheet, modal, context menu, link preview\n\nReferences\n\nConsult these resources for detailed implementation:\n\nReference\tPurpose\nreferences/route-structure.md\tRoute conventions, dynamic routes, groups, query params\nreferences/tabs.md\tNativeTabs, migration from JS tabs, iOS 26 features\nreferences/icons.md\tSF Symbols with expo-symbols, animations, weights\nreferences/controls.md\tNative iOS controls: Switch, Slider, DateTimePicker, Picker\nreferences/visual-effects.md\tBlur effects and liquid glass\nreferences/animations.md\tReanimated: entering, exiting, layout, scroll-driven\nreferences/search.md\tSearch bar integration, useSearch hook, filtering\nreferences/gradients.md\tCSS gradients via experimental_backgroundImage\nreferences/media.md\tCamera, audio, video, file saving\nreferences/storage.md\tSQLite, AsyncStorage, SecureStore\nreferences/webgpu-three.md\tWebGPU, Three.js for 3D graphics\nreferences/toolbar-and-headers.md\tStack headers, toolbar customization (iOS)\nCore Principles\nRunning the App\n\nTry Expo Go first before creating custom builds:\n\nnpx expo start # Scan QR with Expo Go\n\n\nCustom builds (npx expo run:ios) only needed 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\nCode Style\nKebab-case file names: comment-card.tsx\nPath aliases in tsconfig over relative imports\nNever co-locate components/utilities in app/ directory\nAlways ensure a route matches \"/\" (may be in a group)\nEscape nested backticks carefully in strings\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 blur views\nResponsiveness\n// Always wrap root in ScrollView with automatic insets\n\n {children}\n\n\n// Use useWindowDimensions, not Dimensions.get()\nconst { width, height } = useWindowDimensions();\n\n// Flexbox over Dimensions API\n\n\nNavigation Patterns\nLink with Preview and Context Menu\nimport { Link } from 'expo-router';\n\n\n \n \n \n \n \n \n \n \n\n\nForm Sheet Modal\n// In _layout.tsx\n\n\nNative Tabs Structure\napp/\n _layout.tsx — \n (index,search)/\n _layout.tsx — \n index.tsx\n search.tsx\n\n// app/_layout.tsx\nimport { NativeTabs, Icon, Label } from \"expo-router/unstable-native-tabs\";\n\nexport default function Layout() {\n return (\n \n \n \n \n \n \n \n );\n}\n\nStyling Guidelines\nFlex gap over margin/padding where possible\nborderCurve: 'continuous' for rounded corners (not capsules)\nboxShadow style prop, never legacy RN shadow/elevation\nStack title instead of custom text elements for page headers\nInline styles, not StyleSheet.create unless reusing\nfontVariant: 'tabular-nums' for numeric counters\nselectable prop on Text displaying copiable data\n// Shadow example\n\n\n// Continuous border curve\n\n\nBehavior Patterns\nHaptics: Use expo-haptics conditionally on iOS\nSearch bar: Prefer headerSearchBarOptions in Stack.Screen\nSelectable text: Add selectable prop to important data\nFormat large numbers: 1.4M, 38k instead of 1,400,000\nNever use intrinsic elements (img, div) outside DOM components\nNEVER Do\nNEVER use legacy modules: Picker, WebView, SafeAreaView from react-native, AsyncStorage (old), expo-permissions\nNEVER use Dimensions.get() — always useWindowDimensions\nNEVER co-locate components in the app/ directory\nNEVER use Platform.OS — use process.env.EXPO_OS\nNEVER use legacy shadow styles — use CSS boxShadow\nNEVER start with custom builds — try Expo Go first\nNEVER use StyleSheet.create for one-time styles\nNEVER use @expo/vector-icons — use expo-symbols"
},
"trust": {
"sourceLabel": "tencent",
"provenanceUrl": "https://clawhub.ai/wpank/expo-native-ui",
"publisherUrl": "https://clawhub.ai/wpank/expo-native-ui",
"owner": "wpank",
"version": "1.0.0",
"license": null,
"verificationStatus": "Indexed source record"
},
"links": {
"detailUrl": "https://openagent3.xyz/skills/expo-native-ui",
"downloadUrl": "https://openagent3.xyz/downloads/expo-native-ui",
"agentUrl": "https://openagent3.xyz/skills/expo-native-ui/agent",
"manifestUrl": "https://openagent3.xyz/skills/expo-native-ui/agent.json",
"briefUrl": "https://openagent3.xyz/skills/expo-native-ui/agent.md"
}
}