skills.rest
muhammaddadu
muhammaddaduCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

building-native-ui

Build native iOS and Android app interfaces with Expo Router, Reanimated, and platform-native components.

1|1|Updated Jul 6, 2026
Search Tags:#react native#mobile app#expo#expo router#reanimated#ios ui#native tabs
One-click install
npx skills add https://github.com/muhammaddadu/ai-skill-collection --skill building-native-ui-muhammaddadu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-native-ui
Source: https://github.com/muhammaddadu/ai-skill-collection/tree/main/3-delivery/building-native-ui
Command: npx skills add https://github.com/muhammaddadu/ai-skill-collection --skill building-native-ui-muhammaddadu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building native-feeling mobile apps with Expo requires knowing dozens of platform conventions, library choices, and navigation patterns. This Skill consolidates the correct APIs, styling rules, and component patterns so generated code follows Apple Human Interface Guidelines and current Expo best practices instead of deprecated React Native approaches. ## Core Features & Use Cases - Navigation & Routing: File-based routing with Expo Router, native tabs, stacks, modals, form sheets, link previews, and context menus. - Native UI Patterns: SF Symbols icons, native controls (Switch, Slider, SegmentedControl, DateTimePicker), toolbars, header search, and liquid glass effects for iOS 26. - Animation & Media: Reanimated entering/exiting/scroll-driven animations, camera, audio/video playback, and media library saving. - Web Interop: DOM components via the 'use dom' directive to run web libraries like recharts inside a native app. - Use Case: Ask the agent to scaffold an Expo app with a tab layout, a searchable list screen, and a detail page with zoom transitions, and it produces code using NativeTabs, headerSearchBarOptions, and Reanimated presets. ## Quick Start Use the building-native-ui skill to create an Expo app screen with a native tab layout, a searchable list, and a detail page with entering animations.

Frequently Asked Questions about building-native-ui

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

FAQPage Schema
How do I build native iOS UI with Expo Router?▼

Use file-based routes in the app directory with _layout.tsx files defining Stacks or NativeTabs. Set titles via Stack.Screen options, add search with headerSearchBarOptions, and use SF Symbols through expo-image or expo-symbols for icons.

Should I use NativeTabs or JS Tabs in Expo Router?▼

Prefer NativeTabs from expo-router/unstable-native-tabs for the best iOS experience, including liquid glass on iOS 26 and minimize-on-scroll. JS Tabs remain an option, but NativeTabs use platform-native tab bars on both iOS and Android.

When do I need a custom development build instead of Expo Go?▼

Expo Go covers most expo-* packages, navigation, and UI libraries. Custom builds via npx expo run:ios or eas build are only required for local native modules, Apple targets like widgets, third-party native modules, or custom native configuration.

What are Expo DOM components and when should I use them?▼

DOM components use the 'use dom' directive to run web code in a webview on native platforms. Use them for web-only libraries like recharts or syntax highlighters, but avoid them for simple UI or performance-critical screens.

Which storage library should I use in an Expo app?▼

Use the localStorage polyfill from expo-sqlite for simple key-value data, full expo-sqlite for relational data and complex queries, and expo-secure-store for sensitive values like tokens. AsyncStorage should not be used.

Why is my tab bar transparent or headers flickering in Expo Router?▼

A transparent tab bar usually means the ScrollView is not the first opaque child of the screen; set disableTransparentOnScrollEdge or fix the view hierarchy. Header flicker between tabs is fixed by wrapping the app in a ThemeProvider from @react-navigation/native.

Related Skills

Explore More Software Engineering Skills→
yabafreyabafre
2

aped-ux

Scaffold a React preview app and generate a validated UX spec from a PRD.

Community
Advanced
skillcreatoraiskillcreatorai
1.1k

expo-deployment

Automate Expo app deployment to iOS App Store, Google Play, and web.

Community
Advanced
FilenCloudDiensteFilenCloudDienste
34

expo-module

Build Expo native modules and views with the Expo Modules API.

Official
Intermediate
Yemomo511Yemomo511
2

expo-ui-jetpack-compose

Integrate native Android Jetpack Compose views into Expo applications.

Community
Basic