native-ui

What This Skill Does

The native-ui skill provides a specialized framework for building high-fidelity, native mobile applications using Expo Router and React Native. It encapsulates best practices for the modern Expo ecosystem, emphasizing a clean architecture that separates routing from business logic and view components. The skill handles complex native integrations including sophisticated navigation stacks, platform-specific controls, fluid animations via Reanimated, and advanced visual effects. It is designed to strictly adhere to Apple Human Interface Guidelines, ensuring that your application feels like a first-class citizen on iOS while maintaining cross-platform compatibility.

Installation

To integrate this skill into your OpenClaw environment, execute the following command in your terminal:

npx clawhub@latest install native-ui

Once installed, ensure your tsconfig.json is configured with path aliases to keep your imports clean and maintainable. The skill assumes a standard Expo project structure where the app/ directory is reserved strictly for routing, while shared logic and UI components reside in a top-level src/ or components/ directory.

Use Cases

• Building complex navigation flows using Expo Router (tabs, stacks, modals).
• Implementing iOS-native interactions such as SegmentedControls, Blur effects, and native search headers.
• Creating performant animations and gesture-based interactions using React Native Reanimated.
• Developing data-driven dashboards with SQLite or local secure storage.
• Designing high-performance 3D visualizers using WebGPU/Three.js integrated with native views.

Example Prompts

1. "Create a new route in the app directory for a user profile page, including a native stack header with a back button and a custom search bar using the useSearch hook."
2. "Implement a Reanimated list view with entry and exit animations, and use the expo-symbols library to display SF Symbols for the list icons."
3. "Refactor my existing navigation to use a Tab-based layout with a native blur effect on the bottom tab bar, ensuring it matches Apple Human Interface Guidelines."

Tips & Limitations

• Start with Expo Go: Always validate your interface components in Expo Go before attempting custom native builds. Custom builds should only be triggered for third-party native dependencies or specific iOS target requirements.
• Route Structure: Avoid the anti-pattern of co-locating components inside the app/ directory. Keep your routing layer thin and declarative.
• Performance: Use useSharedValue and useAnimatedStyle for animations to ensure they remain off the main JavaScript thread.
• New Architecture: If you need CSS-like gradients, ensure you are utilizing the New Architecture, as they rely on experimental_backgroundImage.