skills.rest
elcokiin
elcokiinCOMMUNITY
Explore all skills by this author →
Website𝕏@elcokiinGitHub

building-native-ui

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

Updated Mar 19, 2026
Search Tags:#ios#mobile development#react native#expo#expo router#reanimated#native ui
One-click install
npx skills add https://github.com/elcokiin/vibe-tribe --skill building-native-ui-elcokiin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-native-ui
Source: https://github.com/elcokiin/vibe-tribe/tree/main/.agents/skills/building-native-ui
Command: npx skills add https://github.com/elcokiin/vibe-tribe --skill building-native-ui-elcokiin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building React Native apps that feel truly native on iOS requires deep knowledge of Expo Router conventions, native controls, SF Symbols, and platform-specific behaviors that are easy to get wrong. ## Core Features & Use Cases - Navigation & Routing: Implement stacks, native tabs, form sheets, modals, link previews, and context menus using Expo Router file-based conventions. - Native UI Components: Use SF Symbols, native switches, sliders, segmented controls, date pickers, blur effects, and iOS 26 liquid glass for platform-authentic interfaces. - Animations & Media: Add Reanimated entering/exiting/scroll-driven animations, haptics, camera, audio/video playback, and local storage with SQLite or SecureStore. - Use Case: When building a new Expo app screen, apply these guidelines to structure routes correctly, style with Apple Human Interface Guidelines, and choose the right native components instead of deprecated libraries. ## Quick Start Use the building-native-ui skill to create an Expo Router app screen with native tabs, a stack header with search, and Reanimated list 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 structure routes in Expo Router?▼

Place routes in the app directory using _layout.tsx files to define stacks, square brackets like [id].tsx for dynamic segments, and (group) folders for URL-independent organization. Never co-locate components or utilities in the app directory.

How do I add native tabs in an Expo app?▼

Use NativeTabs from expo-router/unstable-native-tabs with NativeTabs.Trigger children for each tab, providing Icon, Label, and Badge subcomponents. Nest a Stack inside each tab for headers, and prefer SF Symbols via the sf prop over vector icons.

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

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

What should I use instead of AsyncStorage in Expo?▼

Use the localStorage polyfill from expo-sqlite/localStorage/install for simple key-value data, full expo-sqlite for complex relational queries, and expo-secure-store for sensitive data like tokens and passwords.

Does expo-glass-effect work on all iOS versions?▼

Liquid glass effects via GlassView require iOS 26 or later. Check availability with isLiquidGlassAvailable() and fall back to BlurView from expo-blur with systemMaterial tints on older versions.

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→
yebotyebot
9

react-native-expo

Build and configure React Native and Expo apps with EAS workflows.

Community
Intermediate
openaiopenai
5.3k

expo-deployment

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

Official
Intermediate
ai-enhanced-engineerai-enhanced-engineer
3

mobile-e2e-testing

Automate mobile app end-to-end testing with Maestro and Detox frameworks.

Official
Advanced
voidrotvoidrot

react-native-architecture

Guide React Native app architecture with Expo, navigation, native modules, and offline sync.

Community
Advanced