skills.rest
emilyLi2020
emilyLi2020COMMUNITY
Explore all skills by this author →
GitHub

building-native-ui

Enforce platform-specific design guidelines and native components for Expo and React Native apps.

2|Updated Apr 14, 2026
Search Tags:#ios#animations#react-native#mobile-development#expo#expo-router#native-ui
One-click install
npx skills add https://github.com/emilyLi2020/WAVE --skill building-native-ui-emilyli2020
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-native-ui
Source: https://github.com/emilyLi2020/WAVE/tree/main/.agents/skills/building-native-ui
Command: npx skills add https://github.com/emilyLi2020/WAVE --skill building-native-ui-emilyli2020

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the common pain points of building Expo and React Native apps that feel non-native, have inconsistent styling, broken navigation patterns, or fail to follow platform-specific human interface guidelines, leading to poor user experience and unnecessary rework.

Core Features & Use Cases

  • Expo Router Navigation Best Practices: Complete guidance on route structure, stack navigation, native tabs, link previews, context menus, and Apple zoom transitions for seamless, platform-appropriate navigation.
  • Native UI Component Standards: Rules for using native iOS controls (Switch, Slider, SegmentedControl), SF Symbols, haptics, and platform-adaptive styling to avoid custom, non-native user interface elements.
  • Use Case: A developer building a cross-platform recovery support app can use this Skill to implement native-feeling tab navigation, animated session screens, and accessible form inputs that follow Apple's Human Interface Guidelines, without manual platform-specific tweaks.

Quick Start

Use the building-native-ui skill to add a native tab navigator with home and settings tabs, plus a stack-based detail screen with animated transitions to your Expo app.

Frequently Asked Questions about building-native-ui

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

FAQPage Schema
How do I make my Expo React Native app feel native on iOS?▼

Make your Expo React Native app feel native by enforcing platform-specific design guidelines, using native iOS controls like Switch and SegmentedControl, and integrating SF Symbols for consistent, native-feeling styling.

What is the best way to implement native tabs and stack navigation in Expo Router?▼

Implement native tabs and stack navigation in Expo Router by following route structure best practices, which provide platform-appropriate navigation, link previews, context menus, and Apple zoom transitions for seamless user flows.

Can I use Reanimated animation patterns to build performant native UI in React Native?▼

Yes, you can apply Reanimated animation patterns in React Native to build performant native UI, ensuring smooth animated transitions and session screens that comply with platform-specific human interface guidelines.

Does Expo Router support Apple Human Interface Guidelines for accessible form controls?▼

Yes, Expo Router supports Apple Human Interface Guidelines by enforcing native component usage, providing accessible form controls, and applying platform-adaptive styling to avoid non-native user interface elements.

Why does my React Native app have inconsistent styling and broken navigation patterns?▼

Inconsistent styling and broken navigation patterns in React Native apps usually occur when failing to follow platform-specific guidelines, using custom non-native elements, or improperly structuring Expo Router stack navigation.

How do I add native tab navigation and animated transitions to my Expo app?▼

Add native tab navigation and animated transitions to your Expo app by utilizing Expo Router's native tab implementation, structuring stack-based detail screens, and applying Reanimated animation patterns for native-feeling transitions.

Related Skills

Explore More Software Engineering Skills→
skillcreatoraiskillcreatorai
1.1k

expo-app-design

Configure Expo Router and NativeWind for cross-platform React Native app development.

Community
Basic
msichtermanmsichterman

expo-dev-client

Create and distribute Expo development clients for iOS and Android testing.

Community
Intermediate
jpoindexterjpoindexter
1

ios-sf-symbols-and-icons

Guide iOS 26 app icon and SF Symbol design per Apple's Human Interface Guidelines.

Community
Intermediate
borgheiborghei
467

senior-mobile

Provides expert guidance and reusable templates for iOS, Android, React Native, and Flutter app development.

Community
Advanced