Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Developer Tools
Expor Native UI
Build beautiful native iOS/Android apps with Expo Router. Covers route structure, native tabs, animations, blur effects, liquid glass, SF Symbols, and platform patterns.
skill openclawclawhub Free
Build beautiful native iOS/Android apps with Expo Router. Covers route structure, native tabs, animations, blur effects, liquid glass, SF Symbols, and platform patterns.
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- README.md, SKILL.md, references/storage.md, references/search.md, references/toolbar-and-headers.md, references/route-structure.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- 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.
New install
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
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.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- wpank
- Source page
- View original listing
- Canonical URL
- Open canonical page
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 <ScrollView contentInsetAdjustmentBehavior="automatic"> {children} </ScrollView> // Use useWindowDimensions, not Dimensions.get() const { width, height } = useWindowDimensions(); // Flexbox over Dimensions API <View style={{ flex: 1, flexDirection: 'row', gap: 16 }} />
Link with Preview and Context Menu
import { Link } from 'expo-router'; <Link href="/settings"> <Link.Trigger> <Pressable><Card /></Pressable> </Link.Trigger> <Link.Preview /> <Link.Menu> <Link.MenuAction title="Share" icon="square.and.arrow.up" onPress={handleShare} /> <Link.MenuAction title="Delete" icon="trash" destructive onPress={handleDelete} /> </Link.Menu> </Link>
Form Sheet Modal
// In _layout.tsx <Stack.Screen name="sheet" options={{ presentation: "formSheet", sheetGrabberVisible: true, sheetAllowedDetents: [0.5, 1.0], contentStyle: { backgroundColor: "transparent" }, // Liquid glass on iOS 26+ }} />
Native Tabs Structure
app/ _layout.tsx โ <NativeTabs /> (index,search)/ _layout.tsx โ <Stack /> index.tsx search.tsx // app/_layout.tsx import { NativeTabs, Icon, Label } from "expo-router/unstable-native-tabs"; export default function Layout() { return ( <NativeTabs> <NativeTabs.Trigger name="(index)"> <Icon sf="list.dash" /> <Label>Items</Label> </NativeTabs.Trigger> <NativeTabs.Trigger name="(search)" role="search" /> </NativeTabs> ); }
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 <View style={{ boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)" }} /> // Continuous border curve <View style={{ borderRadius: 12, borderCurve: 'continuous' }} />
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
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
6 Docs
- SKILL.md
- README.md
- references/route-structure.md
- references/search.md
- references/storage.md
- references/toolbar-and-headers.md