expo-native-ui

What This Skill Does

The expo-native-ui skill provides a robust architectural framework for building high-performance, production-ready native mobile applications using Expo Router. It acts as an expert companion, guiding developers through the intricacies of Apple Human Interface Guidelines and modern React Native development paradigms. This skill focuses on delivering a "native-first" experience by leveraging Expo's native primitives, including file-based routing, native tab bars, and advanced visual styling components. It enables seamless integration of complex UI elements such as liquid glass effects, blur layers, SF Symbols for iconography, and sophisticated Reanimated-driven animations. Whether you are building complex form sheets, modal navigation, or hardware-integrated controls like date pickers and sliders, this skill ensures your code adheres to industry best practices while maximizing performance on both iOS and Android platforms.

Installation

To integrate the expo-native-ui skill into your environment, run the following command in your terminal:

npx clawhub@latest install expo-native-ui

Ensure you have a valid Expo Router project initialized, as this skill assumes a standard file-based routing structure. You may also install directly from the source repository using clawhub install openclaw/skills/skills/wpank/expo-native-ui.

Use Cases

• Architecting Navigation: Setting up complex navigation stacks, route groups, and dynamic routes to handle authentication flows or deep linking.
• Polishing UI/UX: Implementing high-end visual effects like blur and liquid glass to achieve a premium aesthetic consistent with modern iOS design.
• Component Development: Building custom components using native controls like SegmentedControl, Switch, and Slider to ensure familiar interactions for mobile users.
• Animation Logic: Implementing scroll-driven animations, layout transitions, and entering/exiting animations using react-native-reanimated.
• Iconography: Streamlining the use of SF Symbols through expo-symbols for scalable, high-resolution vector icons.

Example Prompts

1. "Help me restructure my app's navigation to use a persistent native tab bar while implementing a protected authentication flow in a group folder."
2. "How can I apply a dynamic blur effect and liquid glass container to a card component that reacts to scrolling using Reanimated?"
3. "I need to implement a settings screen using native controls like UISwitch and a DateTimePicker, ensuring the styles follow Apple's current design guidelines."

Tips & Limitations

• Start with Expo Go: Always test your layouts in Expo Go first. Only transition to custom development builds (npx expo run:ios) if your project specifically requires custom native modules or Apple-specific targets like widgets.
• Directory Structure: Strictly maintain the rule of never co-locating components within the app/ directory; keep your components in a separate folder to maintain clean route separation.
• Performance: While Reanimated is performant, avoid heavy logic inside animation worklets. Keep the main thread responsive by offloading heavy computations to background tasks.
• Safety: Be aware that this skill involves heavy file-system interaction within your project directory and generates code that utilizes native hardware APIs.