skills.rest
Divith123
Divith123COMMUNITY
Explore all skills by this author →
Website𝕏@divith_selvamGitHub

building-native-ui

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

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

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, correct library choices, and iOS-specific patterns that are easy to get wrong, such as safe area handling, navigation structure, and deprecated APIs. ## Core Features & Use Cases - Navigation & Routing: Implement Expo Router stacks, native tabs, form sheets, modals, link previews, and context menus following Apple Human Interface Guidelines. - Native UI Components: Use SF Symbols, native controls (Switch, Slider, DateTimePicker), liquid glass effects, blur, and CSS gradients for platform-authentic styling. - Animations & Media: Add Reanimated entering/exiting/scroll-driven animations, camera capture, audio/video playback, and local storage with SQLite or localStorage. - Use Case: When building a new Expo app screen, apply this Skill to structure routes correctly, add a native search bar to the stack header, style with system colors, and animate list items with staggered entrances. ## Quick Start Ask the assistant to build an Expo app screen with native tabs, a stack header with search, and Reanimated list animations following the building-native-ui guidelines.

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. Add Icon with sf and md props for SF Symbols on iOS and Material Symbols on Android, plus Label and Badge components. 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 with sheetAllowedDetents like [0.5, 1.0] and sheetGrabberVisible. Use contentStyle with transparent backgroundColor to get a liquid glass background on iOS 26, and flex: 1 on the screen's root view.

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

Always try Expo Go first with 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 like WebGPU.

expo-av vs expo-audio and expo-video, which should I use?▼

Use expo-audio for audio playback and recording, and expo-video for video playback; expo-av is deprecated. Similarly, prefer expo-image over img elements, expo-symbols or SF Symbols over vector icon libraries, and the localStorage polyfill over AsyncStorage.

Why is my tab bar transparent or my header missing in Expo Router?▼

Headers require a Stack nested inside each tab since NativeTabs do not render headers. For transparent tab bars, ensure a ScrollView or FlatList is the first opaque child of the screen, or set disableTransparentOnScrollEdge on the trigger.

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

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

Related Skills

Explore More Software Engineering Skills→
takapomtakapom

expo-install

Install Expo-compatible packages and configure app.json for React Native projects.

Community
Intermediate
openaiopenai
5.3k

expo-deployment

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

Official
Intermediate
alsmadi99alsmadi99

fullstack-guardian

Implements secure full-stack features with authentication, validation, and data handling.

Community
Advanced
partme-aipartme-ai
610

react-native

Provides comprehensive guidance for developing cross-platform mobile applications with React Native.

Official
Intermediate