# Send 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": "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": {
    "downloadUrl": "/downloads/native-ui",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=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": "native-ui",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-06T01:43:02.567Z",
      "expiresAt": "2026-05-13T01:43:02.567Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=native-ui",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=native-ui",
        "contentDisposition": "attachment; filename=\"native-ui-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "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/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/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"
  }
}
```
## Documentation

### Native UI with Expo Router

Patterns and conventions for building native mobile applications with Expo Router and React Native.

### References

Consult these as needed:

./references/route-structure.md — Route conventions, dynamic routes, groups, folder organization
./references/tabs.md — Native tab bar with NativeTabs, iOS 26 features
./references/icons.md — SF Symbols with expo-symbols, icon names, animations, weights
./references/controls.md — Native iOS controls: Switch, Slider, SegmentedControl, DateTimePicker
./references/visual-effects.md — Blur effects (expo-blur) and liquid glass (expo-glass-effect)
./references/animations.md — Reanimated: entering, exiting, layout, scroll-driven, gestures
./references/search.md — Search bar with headers, useSearch hook, filtering patterns
./references/gradients.md — CSS gradients via experimental_backgroundImage (New Architecture only)
./references/media.md — Camera, audio, video, file saving
./references/storage.md — SQLite, AsyncStorage, SecureStore
./references/webgpu-three.md — 3D graphics and GPU visualizations with WebGPU/Three.js
./references/toolbar-and-headers.md — Stack headers and toolbar with buttons, menus, search bars (iOS)
./references/form-sheet.md — Form sheet presentation patterns

### Running the App

Always try Expo Go first before creating custom builds.

Start with npx expo start and scan the QR code
Test features in Expo Go
Only create custom builds when required

### When Custom Builds Are Required

Use npx expo run:ios/android or eas build only 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
Custom native configuration beyond app.json

Expo Go supports all expo-* packages, Expo Router, Reanimated, Gesture Handler, push notifications, and deep links out of the box.

### OpenClaw / Moltbot / Clawbot

npx clawhub@latest install native-ui

### Code Style

Escape nested backticks and quotes correctly
Always use import statements at the top of the file
Use kebab-case for file names: comment-card.tsx
Remove old route files when restructuring navigation
No special characters in file names
Configure tsconfig.json path aliases; prefer aliases over relative imports

### Routes

See ./references/route-structure.md for detailed conventions.

Routes belong in the app directory
Never co-locate components, types, or utilities in app/ — this is an anti-pattern
Always have a route matching /, possibly inside a group route

### 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 glass backdrops

Never use deprecated modules: Picker, WebView, SafeAreaView, AsyncStorage (from RN core), or legacy expo-permissions.

### Responsiveness

Wrap root components in a scroll view
Use <ScrollView contentInsetAdjustmentBehavior="automatic" /> instead of <SafeAreaView>
Apply contentInsetAdjustmentBehavior="automatic" to FlatList and SectionList too
Use flexbox instead of Dimensions API
Prefer useWindowDimensions over Dimensions.get() for screen measurement

### Behavior

Use expo-haptics conditionally on iOS for delightful interactions
Use views with built-in haptics (<Switch />, @react-native-community/datetimepicker)
First child of a Stack route should almost always be a ScrollView with contentInsetAdjustmentBehavior="automatic"
Prefer headerSearchBarOptions in Stack.Screen options for search bars
Use <Text selectable /> on data that users may want to copy
Format large numbers: 1.4M, 38k
Never use intrinsic elements (img, div) outside webviews or Expo DOM components

### Styling

Follow Apple Human Interface Guidelines.

### General Rules

Prefer flex gap over margin and padding
Prefer padding over margin
Always account for safe area via stack headers, tabs, or contentInsetAdjustmentBehavior="automatic"
Ensure both top and bottom safe area insets are handled
Inline styles preferred over StyleSheet.create unless reusing styles
Add entering/exiting animations for state changes
Use { borderCurve: 'continuous' } for rounded corners (not capsule shapes)
Use navigation stack title instead of custom text headers
On ScrollView, use contentContainerStyle for padding/gap (avoids clipping)
CSS and Tailwind are not supported — use inline styles

### Text Styling

Add selectable prop to <Text/> elements showing important data or errors
Use { fontVariant: 'tabular-nums' } on counters for alignment

### Shadows

Use CSS boxShadow style prop. Never use legacy RN shadow or elevation styles.

<View style={{ boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)" }} />

Inset shadows are supported.

### Link

Use <Link href="/path" /> from expo-router for navigation.

import { Link } from 'expo-router';

<Link href="/path" />

<Link href="/path" asChild>
  <Pressable>...</Pressable>
</Link>

Include <Link.Preview> whenever possible to follow iOS conventions. Add context menus and previews frequently.

### Stack

Always use _layout.tsx files to define stacks
Use Stack from expo-router/stack for native navigation stacks
Set page titles in Stack.Screen options: options={{ title: "Home" }}

### Context Menus

Add long-press context menus to Link components:

<Link href="/settings" asChild>
  <Link.Trigger>
    <Pressable><Card /></Pressable>
  </Link.Trigger>
  <Link.Menu>
    <Link.MenuAction title="Share" icon="square.and.arrow.up" onPress={handleShare} />
    <Link.MenuAction title="Block" icon="nosign" destructive onPress={handleBlock} />
    <Link.Menu title="More" icon="ellipsis">
      <Link.MenuAction title="Copy" icon="doc.on.doc" onPress={() => {}} />
      <Link.MenuAction title="Delete" icon="trash" destructive onPress={() => {}} />
    </Link.Menu>
  </Link.Menu>
</Link>

### Link Previews

<Link href="/settings">
  <Link.Trigger>
    <Pressable><Card /></Pressable>
  </Link.Trigger>
  <Link.Preview />
</Link>

Can be combined with context menus.

### Modal

Present a screen as a modal:

<Stack.Screen name="modal" options={{ presentation: "modal" }} />

Prefer this over custom modal components.

### Sheet

Present as a dynamic form sheet:

<Stack.Screen
  name="sheet"
  options={{
    presentation: "formSheet",
    sheetGrabberVisible: true,
    sheetAllowedDetents: [0.5, 1.0],
    contentStyle: { backgroundColor: "transparent" },
  }}
/>

contentStyle: { backgroundColor: "transparent" } enables liquid glass on iOS 26+.

### Common Route Structure

Standard app layout with tabs and stacks:

app/
  _layout.tsx        — <NativeTabs />
  (index,search)/
    _layout.tsx      — <Stack />
    index.tsx        — Main list
    search.tsx       — Search view

Root layout:

// app/_layout.tsx
import { NativeTabs, Icon, Label } from "expo-router/unstable-native-tabs";
import { Theme } from "../components/theme";

export default function Layout() {
  return (
    <Theme>
      <NativeTabs>
        <NativeTabs.Trigger name="(index)">
          <Icon sf="list.dash" />
          <Label>Items</Label>
        </NativeTabs.Trigger>
        <NativeTabs.Trigger name="(search)" role="search" />
      </NativeTabs>
    </Theme>
  );
}

Shared group layout:

// app/(index,search)/_layout.tsx
import { Stack } from "expo-router/stack";
import { PlatformColor } from "react-native";

export default function Layout({ segment }) {
  const screen = segment.match(/\\((.*)\\)/)?.[1]!;
  const titles: Record<string, string> = { index: "Items", search: "Search" };

  return (
    <Stack
      screenOptions={{
        headerTransparent: true,
        headerShadowVisible: false,
        headerLargeTitleShadowVisible: false,
        headerLargeStyle: { backgroundColor: "transparent" },
        headerTitleStyle: { color: PlatformColor("label") },
        headerLargeTitle: true,
        headerBlurEffect: "none",
        headerBackButtonDisplayMode: "minimal",
      }}
    >
      <Stack.Screen name={screen} options={{ title: titles[screen] }} />
      <Stack.Screen name="i/[id]" options={{ headerLargeTitle: false }} />
    </Stack>
  );
}
## 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-06T01:43:02.567Z
- Expires at: 2026-05-13T01:43:02.567Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/native-ui)
- [Send to Agent page](https://openagent3.xyz/skills/native-ui/agent)
- [JSON manifest](https://openagent3.xyz/skills/native-ui/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/native-ui/agent.md)
- [Download page](https://openagent3.xyz/downloads/native-ui)