# Send Expor Native UI to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - 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. ## Suggested prompts ### New install ```text 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. ``` ### Upgrade existing ```text 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. ``` ## Machine-readable fields ```json { "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": { "downloadUrl": "/downloads/expo-native-ui", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=expo-native-ui", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "README.md", "SKILL.md", "references/storage.md", "references/search.md", "references/toolbar-and-headers.md", "references/route-structure.md" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "expo-native-ui", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-03T02:02:29.668Z", "expiresAt": "2026-05-10T02:02:29.668Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=expo-native-ui", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=expo-native-ui", "contentDisposition": "attachment; filename=\"expo-native-ui-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "expo-native-ui" }, "scope": "item", "summary": "Item download looks usable.", "detail": "Yavira can redirect you to the upstream package for this item.", "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." ] } }, "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" } } ``` ## Documentation ### Expo Native UI Build production-quality native mobile apps with Expo Router following Apple Human Interface Guidelines and modern React Native patterns. ### OpenClaw / Moltbot / Clawbot npx clawhub@latest install expo-native-ui ### WHAT This Skill Does Guides implementation of native mobile apps using Expo Router with: File-based routing with native navigation stacks Native tab bars (NativeTabs) and iOS 26 features SF Symbols integration via expo-symbols Blur effects (expo-blur) and liquid glass (expo-glass-effect) Reanimated animations and gesture handling Native controls: Switch, Slider, SegmentedControl, DateTimePicker ### WHEN To Use Building a new Expo Router app Adding native tab navigation Implementing iOS-style blur or liquid glass effects Creating smooth animations with entering/exiting transitions Integrating SF Symbols for icons Setting up route structure with groups and dynamic routes ### KEYWORDS 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 ### References Consult these resources for detailed implementation: ReferencePurposereferences/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) ### Running the App Try Expo Go first before creating custom builds: npx expo start # Scan QR with Expo Go Custom builds (npx expo run:ios) only needed for: Local Expo modules (custom native code in modules/) Apple targets (widgets, app clips via @bacons/apple-targets) Third-party native modules not in Expo Go ### Code Style Kebab-case file names: comment-card.tsx Path aliases in tsconfig over relative imports Never co-locate components/utilities in app/ directory Always ensure a route matches "/" (may be in a group) Escape nested backticks carefully in strings ### Library Preferences 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 ### Responsiveness // Always wrap root in ScrollView with automatic insets {children} // Use useWindowDimensions, not Dimensions.get() const { width, height } = useWindowDimensions(); // Flexbox over Dimensions API ### Link with Preview and Context Menu import { Link } from 'expo-router'; ### Form Sheet Modal // In _layout.tsx ### Native Tabs Structure app/ _layout.tsx — (index,search)/ _layout.tsx — index.tsx search.tsx // app/_layout.tsx import { NativeTabs, Icon, Label } from "expo-router/unstable-native-tabs"; export default function Layout() { return ( ); } ### Styling Guidelines Flex gap over margin/padding where possible borderCurve: 'continuous' for rounded corners (not capsules) boxShadow style prop, never legacy RN shadow/elevation Stack title instead of custom text elements for page headers Inline styles, not StyleSheet.create unless reusing fontVariant: 'tabular-nums' for numeric counters selectable prop on Text displaying copiable data // Shadow example // Continuous border curve ### Behavior Patterns Haptics: Use expo-haptics conditionally on iOS Search bar: Prefer headerSearchBarOptions in Stack.Screen Selectable text: Add selectable prop to important data Format large numbers: 1.4M, 38k instead of 1,400,000 Never use intrinsic elements (img, div) outside DOM components ### NEVER Do NEVER use legacy modules: Picker, WebView, SafeAreaView from react-native, AsyncStorage (old), expo-permissions NEVER use Dimensions.get() — always useWindowDimensions NEVER co-locate components in the app/ directory NEVER use Platform.OS — use process.env.EXPO_OS NEVER use legacy shadow styles — use CSS boxShadow NEVER start with custom builds — try Expo Go first NEVER use StyleSheet.create for one-time styles NEVER use @expo/vector-icons — use expo-symbols ## Trust - Source: tencent - Verification: Indexed source record - Publisher: wpank - Version: 1.0.0 ## Source health - Status: healthy - Item download looks usable. - Yavira can redirect you to the upstream package for this item. - Health scope: item - Reason: direct_download_ok - Checked at: 2026-05-03T02:02:29.668Z - Expires at: 2026-05-10T02:02:29.668Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/expo-native-ui) - [Send to Agent page](https://openagent3.xyz/skills/expo-native-ui/agent) - [JSON manifest](https://openagent3.xyz/skills/expo-native-ui/agent.json) - [Markdown brief](https://openagent3.xyz/skills/expo-native-ui/agent.md) - [Download page](https://openagent3.xyz/downloads/expo-native-ui)