skills.rest
bmiit145
bmiit145COMMUNITY
Explore all skills by this author →
WebsiteGitHub

expo-native-ui

Build native-feeling Expo screens with semantic colors, native controls, SF Symbols, and visual effects.

Updated Sep 8, 2026
Search Tags:#react native#expo#semantic colors#ios design#sf symbols#native ui#mobile styling
One-click install
npx skills add https://github.com/bmiit145/leadBee --skill expo-native-ui-bmiit145
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-native-ui
Source: https://github.com/bmiit145/leadBee/tree/main/mobile/.agents/skills/expo-native-ui
Command: npx skills add https://github.com/bmiit145/leadBee --skill expo-native-ui-bmiit145

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires expo-symbols, expo-blur, expo-glass-effect, expo-audio, expo-video, expo-camera, expo-sqlite, expo-router, react-native-safe-area-context, react-native-wgpu, three, @react-three/fiber, and includes references (resource) components.

What problem does it solve? Styling Expo and React Native apps to feel truly native on both iOS and Android requires deep knowledge of Apple HIG, Material Design 3, semantic colors, and platform-specific controls. This Skill provides the guidelines and reference recipes to build screens that match each platform's design language without guesswork. ## Core Features & Use Cases - Native Styling System: Use the Color API from expo-router for semantic colors that auto-adapt to light/dark mode on iOS and Android, with a centralized theme palette. - Native Controls & Icons: Recipes for Switch, Slider, SegmentedControl, DateTimePicker, and SF Symbols via expo-symbols, with Material icon fallbacks for Android. - Media & Visual Effects: Camera, audio, and video with expo-audio/expo-video, plus blur, liquid glass (expo-glass-effect), CSS gradients, and WebGPU/Three.js 3D graphics. - Use Case: When building a settings screen or camera flow in an Expo app, use this Skill to pick the right native control, apply platform-correct colors and safe-area handling, and decide whether Expo Go is sufficient or a custom build is required. ## Quick Start Use the expo-native-ui skill to style my Expo settings screen with native controls, semantic colors, and proper safe-area handling.

Frequently Asked Questions about expo-native-ui

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

FAQPage Schema
How do I use SF Symbols in an Expo app?▼

Use the SymbolView component from expo-symbols with a symbol name like "gear" or "star.fill", plus tintColor, weight, and size props. SF Symbols only render on iOS, so every icon needs a Material icon fallback on Android via @expo/vector-icons.

How do I support dark mode colors in React Native?▼

Use the Color API from expo-router, which wraps PlatformColor with iOS UIKit colors (Color.ios.*) and Android Material 3 colors (Color.android.dynamic.*). These resolve on-device and adapt automatically to light and dark mode; centralize them in a theme/colors.ts file.

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

Custom builds via npx expo run:ios or EAS Build are required only for local Expo modules, Apple targets like widgets, third-party native modules not bundled in Expo Go, or features like WebGPU. Most expo-* packages, navigation, and UI libraries work directly in Expo Go.

Should I use expo-av or expo-audio and expo-video?▼

Use expo-audio for audio playback and recording, and expo-video for video playback. The legacy expo-av package is deprecated and should not be used for new media features.

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

Liquid glass requires iOS 26 or later. Check both isLiquidGlassAvailable() and isGlassEffectAPIAvailable() before rendering, and fall back to a BlurView from expo-blur or a solid surface when unavailable or when Reduce Transparency is enabled.

Why should I avoid AsyncStorage in modern Expo apps?▼

AsyncStorage is a removed legacy module. Use the localStorage polyfill from expo-sqlite for simple key-value data, full expo-sqlite for relational data, and expo-secure-store for sensitive values like tokens and passwords.

Related Skills

Explore More Software Engineering Skills→
takapomtakapom

expo-install

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

Community
Intermediate
vesvietvesviet

add-page-route

Add pages and routes following repository navigation, data-loading, and auth patterns.

Community
Intermediate
expoexpo
2.5k

expo-animation

Builds UI-thread animations, gestures, and haptics for React Native and Expo apps.

Official
Advanced
trungenglishtrungenglish
1

expo-ui

Build native iOS and Android UI in React using @expo/ui SwiftUI and Jetpack Compose components.

Community
Intermediate