expo-native-uiBuild beautiful native iOS/Android apps with Expo Router. Covers route structure, native tabs, animations, blur effects, liquid glass, SF Symbols, and platform patterns.
Install via ClawdBot CLI:
clawdbot install wpank/expo-native-uiBuild production-quality native mobile apps with Expo Router following Apple Human Interface Guidelines and modern React Native patterns.
npx clawhub@latest install expo-native-uiGuides implementation of native mobile apps using Expo Router with:
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
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) |
Try Expo Go first before creating custom builds:
npx expo start # Scan QR with Expo GoCustom builds (npx expo run:ios) only needed for:
modules/)@bacons/apple-targets)comment-card.tsxapp/ directory| 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 |
// 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 }} />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>// 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+
}}
/>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>
);
}borderCurve: 'continuous' for rounded corners (not capsules)boxShadow style prop, never legacy RN shadow/elevationStyleSheet.create unless reusingfontVariant: 'tabular-nums' for numeric countersselectable 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' }} />expo-haptics conditionally on iOSheaderSearchBarOptions in Stack.Screenselectable prop to important dataimg, div) outside DOM componentsDimensions.get() — always useWindowDimensionsapp/ directoryPlatform.OS — use process.env.EXPO_OSboxShadow@expo/vector-icons — use expo-symbolsGenerated Mar 1, 2026
A retail company wants to build a cross-platform mobile app for iOS and Android to showcase products with smooth navigation, native tab bars for categories, and engaging animations for product transitions. This skill helps implement file-based routing with Expo Router, integrate SF Symbols for consistent icons, and add liquid glass effects for premium visual appeal in product detail views.
A fitness startup needs a mobile app to track workouts, display progress charts, and offer personalized plans with native controls like sliders for setting goals and date pickers for scheduling. Using this skill, developers can set up native tab navigation for different sections (e.g., workouts, stats), add blur effects for overlays, and ensure responsive layouts with flexbox for various screen sizes.
A social media company is creating an app that includes camera integration for photos/videos, audio recording, and file storage, requiring smooth animations for feed scrolling and context menus for post interactions. This skill guides the implementation of Expo Router for route structure, reanimated animations for entering/exiting transitions, and references for media handling and SQLite storage.
An edtech firm develops an app for interactive lessons, using search bars for content filtering, segmented controls for topic selection, and modal sheets for quizzes. This skill assists in setting up search integration with useSearch hooks, implementing form sheet modals for assessments, and ensuring code style with kebab-case files and path aliases for maintainability.
A travel agency builds an app to book flights and hotels, featuring date-time pickers for scheduling, native tabs for different services (e.g., flights, hotels), and smooth animations for itinerary updates. This skill provides guidance on using Expo Router for dynamic routes, integrating native controls, and applying styling guidelines like continuous border curves for a polished UI.
Offer the app as a service with monthly or annual fees, leveraging native features like secure storage for user data and premium animations to enhance user retention. Revenue is generated through tiered subscription plans that unlock advanced functionalities such as custom themes or priority support.
Provide a free version with basic features like standard navigation and limited effects, then monetize by selling upgrades such as advanced animations, exclusive SF Symbols, or ad-free experiences. Revenue comes from one-time purchases or microtransactions for enhanced UI components.
License the app development framework to businesses for internal tools or customer-facing applications, charging based on the number of users or projects. Revenue is driven by upfront licensing fees and ongoing support contracts, with customization options for native controls and integrations.
💬 Integration Tip
Start by installing the skill via clawhub, then focus on setting up Expo Router with file-based routing and native tabs before adding visual effects like blur or animations to ensure a smooth development workflow.
Full Windows desktop control. Mouse, keyboard, screenshots - interact with any Windows application like a human.
Control Android devices via ADB with support for UI layout analysis (uiautomator) and visual feedback (screencap). Use when you need to interact with Android apps, perform UI automation, take screenshots, or run complex ADB command sequences.
Build, test, and ship iOS apps with Swift, Xcode, and App Store best practices.
Control macOS GUI apps visually — take screenshots, click, scroll, type. Use when the user asks to interact with any Mac desktop application's graphical interface.
Best practices and example-driven guidance for building SwiftUI views and components. Use when creating or refactoring SwiftUI UI, designing tab architecture with TabView, composing screens, or needing component-specific patterns and examples.
Write safe Swift code avoiding memory leaks, optional traps, and concurrency bugs.