skills.rest
Ahmed-Eldalatony
Ahmed-EldalatonyCOMMUNITY
Explore all skills by this author →
GitHub

building-native-ui

Build native iOS interfaces with Expo Router, Reanimated, and SF Symbols.

Updated Mar 22, 2026
Search Tags:#mobile development#react native#expo#expo router#reanimated#ios ui#native tabs
One-click install
npx skills add https://github.com/Ahmed-Eldalatony/airbnb-clone-bench --skill building-native-ui-ahmed-eldalatony
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-native-ui
Source: https://github.com/Ahmed-Eldalatony/airbnb-clone-bench/tree/main/.agents/skills/building-native-ui
Command: npx skills add https://github.com/Ahmed-Eldalatony/airbnb-clone-bench --skill building-native-ui-ahmed-eldalatony

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building polished native mobile UIs with Expo requires knowing dozens of platform-specific conventions, correct library choices, and iOS design patterns that are easy to get wrong. This Skill consolidates the correct patterns for navigation, styling, animations, controls, and native features so generated code follows Apple Human Interface Guidelines and uses current Expo APIs instead of deprecated ones. ## Core Features & Use Cases - Navigation & Routing: Expo Router conventions including stacks, native tabs, form sheets, modals, link previews, context menus, and dynamic route structure. - Native UI Patterns: SF Symbols icons, native controls (Switch, Slider, SegmentedControl, DateTimePicker), toolbar buttons, header search bars, and liquid glass effects for iOS 26. - Motion & Media: Reanimated entering/exiting/scroll-driven animations, camera and media capture, audio/video playback with expo-audio and expo-video, and WebGPU/Three.js 3D scenes. - Use Case: When asked to add a settings screen with a native tab bar, search header, and animated list to an Expo app, the Skill produces code using NativeTabs, headerSearchBarOptions, and Reanimated presets that work in Expo Go. ## Quick Start Use the building-native-ui skill to create an Expo Router screen with a native tab layout, large-title stack header, and a scroll-driven animated list.

Frequently Asked Questions about building-native-ui

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

FAQPage Schema
How do I add native tabs in Expo Router?▼

Use NativeTabs from expo-router/unstable-native-tabs with NativeTabs.Trigger children for each tab. Set icons with the sf prop for SF Symbols on iOS and md for Material Symbols on Android, and nest a Stack inside each tab for headers.

How do I present a form sheet modal in Expo Router?▼

Set presentation to formSheet in Stack.Screen options along with sheetAllowedDetents like [0.5, 1.0] and sheetGrabberVisible. Use contentStyle with a transparent background to get the liquid glass appearance on iOS 26.

Should I use Expo Go or a custom development build?▼

Always try Expo Go first since it supports all expo-* packages, Expo Router, and most UI libraries. Custom builds via npx expo run:ios are only required for local native modules, Apple targets, third-party native code, or WebGPU.

What replaces expo-av for audio and video playback?▼

Use expo-audio with the useAudioPlayer hook for audio and expo-video with useVideoPlayer and VideoView for video. The expo-av package is deprecated and should not be used in new code.

How do I animate list items in React Native with Reanimated?▼

Wrap items in Animated.View with entering and exiting props like FadeInUp and FadeOut, and add layout={LinearTransition} for smooth reordering. Stagger items with .delay(index * 50) and keep animations under 300ms.

Does WebGPU and Three.js work in Expo Go?▼

No, WebGPU requires react-native-wgpu with a custom native build via npx expo prebuild and npx expo run:ios. It also needs a custom Metro resolver configuration and locked versions of three and @react-three/fiber.

Related Skills

Explore More Software Engineering Skills→
MercurykzMercurykz

react-native-expert

Automates scaffolding React Native apps with Expo Router for iOS and Android.

Community
Advanced
openaiopenai
5.3k

expo-deployment

Deploy Expo apps to App Store, Play Store, and web hosting using EAS.

Official
Intermediate
telum-aitelum-ai
2

visual-testing-mobile-react-native

Generates deterministic screenshots for React Native and Expo visual regression testing across iOS and Android via Maestro, Detox, ADB, and simctl.

Official
Intermediate
LowyShinLowyShin
33

mobile-app

Guide cross-platform mobile app development with React Native, Flutter, and Expo.

Community
Advanced