skills.rest
Taquit
TaquitCOMMUNITY
Explore all skills by this author →
GitHub

expo-native-ui

Build native-feeling Expo screens with HIG styling, semantic colors, controls, and animations.

Updated Aug 23, 2026
Search Tags:#react native#expo#semantic colors#reanimated#mobile ui#sf symbols#ios styling
One-click install
npx skills add https://github.com/Taquit/Life-Manager --skill expo-native-ui-taquit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-native-ui
Source: https://github.com/Taquit/Life-Manager/tree/main/double_m_react/.agents/skills/expo-native-ui
Command: npx skills add https://github.com/Taquit/Life-Manager --skill expo-native-ui-taquit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building React Native screens that feel truly native requires knowing which components, colors, and patterns match Apple HIG and Android Material conventions, and developers often pick deprecated or non-native libraries that break platform consistency. ## Core Features & Use Cases - Native UI Guidance: Covers semantic colors via the Color API from expo-router, SF Symbols icons, native controls (Switch, Slider, SegmentedControl, DateTimePicker), and liquid glass effects with expo-glass-effect. - Animations & Media: Provides Reanimated v4 patterns for entering/exiting, scroll-driven, and gesture animations, plus camera, audio, and video usage with expo-audio and expo-video. - Storage & Responsiveness: Recommends localStorage polyfill, expo-sqlite, and expo-secure-store, with responsive layout rules using ScrollView contentInsetAdjustmentBehavior and useWindowDimensions. - Use Case: When building a finance app screen in Expo, use this Skill to style a transaction list with semantic colors, SF Symbol icons, haptic-enabled controls, and smooth Reanimated list animations that adapt to dark mode automatically. ## Quick Start Use the expo-native-ui skill to build a native-feeling settings screen with semantic colors, a Switch, and a segmented control.

Frequently Asked Questions about expo-native-ui

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

FAQPage Schema
How do I build native-feeling screens in Expo?▼

Follow Apple HIG styling with semantic colors from the Color API in expo-router, use SF Symbols via expo-image, and prefer @expo/ui components which render as real SwiftUI and Jetpack Compose. Wrap routes in ScrollView with contentInsetAdjustmentBehavior for proper safe areas.

What animation library should I use in React Native Expo apps?▼

Use Reanimated v4 for animations in Expo apps, avoiding React Native's built-in Animated API. It provides entering and exiting presets like FadeIn and SlideInUp, layout transitions, scroll-driven animations with useScrollViewOffset, and gesture integration with react-native-gesture-handler.

Does Expo Go support all native UI features?▼

Expo Go supports all expo-* packages, Expo Router, Reanimated, and most UI libraries out of the box. Custom builds via npx expo run:ios are only required for local native modules, Apple targets, third-party native modules, or WebGPU features.

Should I use AsyncStorage or expo-sqlite for local storage?▼

Use the localStorage polyfill from expo-sqlite for simple key-value data instead of AsyncStorage. For large datasets or complex queries use full expo-sqlite, and for sensitive data like tokens use expo-secure-store.

Why should I avoid PlatformColor directly in Expo apps?▼

Use the Color API from expo-router instead of raw PlatformColor because it is type-safe and exposes iOS UIKit colors and Android Material 3 colors that auto-adapt to light and dark mode. Note that Color values cannot be passed into Reanimated styles, which require static colors.

Related Skills

Explore More Software Engineering Skills→
SajinthanSajinthan

screen

Generate Expo Router screens, route groups, and layouts for React Native apps.

Community
Advanced
muhammaddadumuhammaddadu
1

expo-deployment

Deploy Expo apps to app stores, TestFlight, and web using EAS Build and EAS Hosting.

Community
Advanced
sofia-municipalitysofia-municipality
9

building-native-ui

Define and apply Expo Router UI guidelines for native-looking interfaces.

Official
Advanced
thejordanleopoldthejordanleopold
4

expo-tailwind

Configure Tailwind CSS with Expo and React Native using NativeWind v5.

Community
Advanced