native-ui

Build native iOS UIs with Expo Router and React Native.

11|4|Updated Feb 9, 2026
One-click install
npx skills add https://github.com/wpank/ai --skill native-ui
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: native-ui
Source: https://github.com/wpank/ai/tree/main/skills/frontend/native-ui
Command: npx skills add https://github.com/wpank/ai --skill native-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides patterns and conventions for building native mobile applications using Expo Router and React Native, ensuring a consistent and high-quality user experience that adheres to platform guidelines.

Core Features & Use Cases

  • Native Navigation: Implement tab bars, stacks, and modals using Expo Router's native components.
  • UI Controls: Utilize native iOS controls like Switches, Sliders, and Date/Time Pickers.
  • Animations & Effects: Integrate smooth animations with Reanimated and visual effects like blur and liquid glass.
  • Use Case: Develop a new feature for a mobile app that requires a native tab-based navigation structure, complete with custom animations and interactive elements, following Apple's Human Interface Guidelines.

Quick Start

Implement a native tab bar navigation structure using Expo Router.

Frequently Asked Questions about native-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build native mobile UIs with Expo Router that follow Apple's Human Interface Guidelines?

To build native mobile UIs with Expo Router, implement native navigation components like NativeTabs and Stack, integrate SF Symbols, and apply platform-consistent visual effects like blur and liquid glass to adhere to Apple's Human Interface Guidelines.

Can I use native iOS controls like Switches and Date Pickers with React Native and Expo Router?

Yes, you can use native iOS controls like Switches, Sliders, and Date/Time Pickers within React Native and Expo Router to create a polished, platform-consistent user experience for iOS applications.

What's the best way to implement native tab-based navigation in Expo Router?

The best way to implement native tab-based navigation in Expo Router is by using its native navigation components like NativeTabs and Stack, which provide routing conventions and native UI patterns for a high-quality mobile experience.

How do I add smooth animations and visual effects like liquid glass in React Native?

You can add smooth animations and visual effects like liquid glass in React Native by integrating Reanimated animations and utilizing native visual effect components to create a polished iOS user interface.

Does this native UI approach require specific dependencies for Expo Router?

Building native UIs with Expo Router relies on React Native and Expo Router conventions, requiring no external dependencies listed in the Skill metadata to implement native navigation, iOS controls, and Reanimated animations.

When should I use NativeTabs and Stack for routing conventions in mobile development?

Use NativeTabs and Stack routing conventions in mobile development when you need to establish a native tab-based navigation structure with modals and stacks that align with iOS platform guidelines.