Expo / React Native iOS interface conforming to Apple Human Interface Guidelines (iOS 26) — native navigation (Expo Router native stack and tabs), platform controls (Alert, ActionSheetIOS, SF Symbols via expo-symbols), safe areas, dark mode, Dynamic Type, haptics, Liquid Glass, accessibility, and 60fps motion. Covers architecture and styling decisions made in React Native/TypeScript; for the @expo/ui SwiftUI component API use the expo-ui skill, and for native Swift use ios-hig. Trigger when building, reviewing, or refactoring such an app — even when the user does not say "HIG" or "native feel" but is writing TSX screens, navigation, lists, forms, or styling for iOS in Expo.
Installation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Expo / React Native iOS interface conforming to Apple Human Interface Guidelines (iOS 26) — native navigation (Expo Router native stack and tabs), platform controls (Alert, ActionSheetIOS, SF Symbols via expo-symbols), safe areas, dark mode, Dynamic Type, haptics, Liquid Glass, accessibility, and 60fps motion. Covers architecture and styling decisions made in React Native/TypeScript; for the @expo/ui SwiftUI component API use the expo-ui skill, and for native Swift use ios-hig. Trigger when building, reviewing, or refactoring such an app — even when the user does not say "HIG" or "native feel" but is writing TSX screens, navigation, lists, forms, or styling for iOS in Expo.
Expo iOS HIG Best Practices
Design rules for building iOS 26 apps in Expo (React Native) that feel genuinely native under Apple's Human Interface Guidelines. Contains 46 rules across 8 categories, prioritized by how much each decision affects native feel and HIG compliance. Every example is TSX/Expo — the decisions you make in React Native and TypeScript, not Swift.
The core idea: a React Native app feels native when it reaches for the platform — the system navigation controller, system controls, semantic colors, SF Symbols, real haptics, the system share sheet — instead of re-implementing iOS in JavaScript. These rules say which decision earns the native feel and which one quietly forfeits it.
When to Apply
Reference these guidelines when:
Building or reviewing iOS screens, navigation, lists, or forms in an Expo app
Choosing navigation: Expo Router native stack vs JS stack, native tabs, sheets, modals, large titles
Picking controls: when to use the native Alert, ActionSheetIOS, date picker, Switch, SF Symbols, or drop to @expo/ui
Styling for the platform: safe areas, dark mode, semantic colors, the iOS type scale, spacing, Liquid Glass
Adding motion, loading/empty states, accessibility, permissions, and launch polish
When NOT to Use This Skill
The @expo/ui component API — for how to use @expo/ui/swift-ui components, Host boundaries, and modifiers, use the expo-ui skill. This skill says which decisions make an app native and points to @expo/ui when dropping to SwiftUI is the right call; it does not re-document that API.
The cross-platform design system itself — for the shared Unistyles theme, design tokens, variant-driven component APIs, and making components feel native on web as well as iOS, use the expo-design-system skill. This skill governs iOS native feel; that one governs the token and component architecture that the two frontends share.
Native Swift / SwiftUI — for HIG in a native Swift codebase, use ios-hig or ios-design. This skill's examples are all React Native/TSX.
Android — these rules target iOS conventions. Use platform-adaptive code so Android gets Material; don't apply iOS idioms there.
Rule Categories by Priority
Priority
Category
Impact
Prefix
1
Native Navigation Architecture
CRITICAL
nav-
2
Native Component Fidelity
CRITICAL
native-
3
Layout & Adaptivity
HIGH
layout-
4
Touch, Gestures & Haptics
HIGH
touch-
5
Visual System & Liquid Glass
HIGH
visual-
6
Motion & Feedback
MEDIUM-HIGH
motion-
7
Accessibility
MEDIUM-HIGH
acc-
8
System Integration & Polish
MEDIUM
system-
Quick Reference
1. Native Navigation Architecture (CRITICAL)
nav-native-stack — Use Expo Router's native Stack for screen hierarchy
Each rule file contains a short explanation of why it matters for native feel, an Incorrect (non-native) TSX example, a Correct (native) example that is a minimal diff from it, and an authoritative reference URL. Where relevant, rules add a "When NOT to use this pattern" or "Alternative" section.
Related Skills
expo-ui — @expo/ui/swift-ui component API reference. Use it when the rules here point you to native SwiftUI components.
ios-hig / ios-design — HIG and Apple design principles for native Swift/SwiftUI codebases.
expo — Expo React Native performance optimization, complementary to the motion/list rules here.
