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.

Security Scan

This is an instruction-only skill containing documentation and code snippets for building Expo Router apps; its declared requirements and files align with its stated purpose and it does not request credentials or perform installs.

Purpose & Capability

The skill describes Expo Router / React Native UI guidance and all included files are documentation and example code for that purpose. There are no unrelated credential requests, binaries, or configuration paths that don't match the stated goal.

Instruction Scope

SKILL.md and the reference files contain implementation guidance and code snippets only. They do not instruct the agent to read or exfiltrate user files, access unrelated environment variables, or contact hidden endpoints. Some examples reference external example media URLs and local project paths (app/, components/, ~/.ai-skills) which are normal for developer docs.

Install Mechanism

There is no install spec (instruction-only), which is low risk. The README contains example commands (e.g., 'npx clawhub@latest install expo-native-ui' and an unusual 'npx add https://github.com/.../tree/...') — these are user-facing installation hints rather than an automated install step, but users should be cautious running npx commands that fetch code from external locations without review.

Credentials

The skill declares no required environment variables, no primary credential, and no config paths. Example code references permissions typical for mobile apps (camera, media library) but does not require secrets or unrelated credentials.

Persistence & Privilege

always is false and the skill is user-invocable. There is no request to persist, enable itself system-wide, or modify other skills or agent settings. It's documentation-only and does not demand elevated runtime privileges.

Assessment

This skill is essentially a collection of docs and example code for Expo Router and React Native UI patterns and appears internally consistent. Before running any install commands shown in the README (for example any npx command that fetches code), review the referenced source and any scripts it would execute. The skill contains example network resource URLs and code that writes files or uses permissions (camera, media, file storage) — these are normal for mobile app examples but you should not run code snippets or install remote packages without inspecting them first. If you plan to copy example code into a real project, audit any third-party package versions (especially native modules like WebGPU/Three.js) and follow Expo's recommended build steps.

Expo Native UI

Build production-quality native mobile apps with Expo Router following Apple Human Interface Guidelines and modern React Native patterns.

Installation

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:

Reference	Purpose
references/route-structure.md	Route conventions, dynamic routes, groups, query params
references/tabs.md	NativeTabs, migration from JS tabs, iOS 26 features
references/icons.md	SF Symbols with expo-symbols, animations, weights
references/controls.md	Native iOS controls: Switch, Slider, DateTimePicker, Picker
references/visual-effects.md	Blur effects and liquid glass
references/animations.md	Reanimated: entering, exiting, layout, scroll-driven
references/search.md	Search bar integration, useSearch hook, filtering
references/gradients.md	CSS gradients via experimental_backgroundImage
references/media.md	Camera, audio, video, file saving
references/storage.md	SQLite, AsyncStorage, SecureStore
references/webgpu-three.md	WebGPU, Three.js for 3D graphics
references/toolbar-and-headers.md	Stack headers, toolbar customization (iOS)

Core Principles

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

Use	Instead Of
expo-audio	expo-av
expo-video	expo-av
expo-symbols	@expo/vector-icons
react-native-safe-area-context	RN SafeAreaView
process.env.EXPO_OS	Platform.OS
React.use	React.useContext
expo-image	intrinsic img element
expo-glass-effect	custom 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 }} />

Navigation Patterns

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

1. NEVER use legacy modules: Picker, WebView, SafeAreaView from react-native, AsyncStorage (old), expo-permissions
2. NEVER use Dimensions.get() — always useWindowDimensions
3. NEVER co-locate components in the app/ directory
4. NEVER use Platform.OS — use process.env.EXPO_OS
5. NEVER use legacy shadow styles — use CSS boxShadow
6. NEVER start with custom builds — try Expo Go first
7. NEVER use StyleSheet.create for one-time styles
8. NEVER use @expo/vector-icons — use expo-symbols