expo-native-ui

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

Updated Sep 11, 2026
One-click install
npx skills add https://github.com/CYRUS-pinto/pi-bot --skill expo-native-ui-cyrus-pinto
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: expo-native-ui
Source: https://github.com/CYRUS-pinto/pi-bot/tree/main/.agents/skills/expo-native-ui
Command: npx skills add https://github.com/CYRUS-pinto/pi-bot --skill expo-native-ui-cyrus-pinto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building Expo apps that feel truly native requires knowing which components, colors, and libraries match Apple HIG and Android Material conventions. This Skill provides concrete guidance on styling, controls, icons, media, storage, and visual effects so screens look and behave like platform-native UI instead of generic cross-platform layouts. ## Core Features & Use Cases - Native Styling System: Use the Color API from expo-router for semantic iOS/Android colors that auto-adapt to light and dark mode, plus CSS boxShadow, continuous border curves, and safe-area-aware scrolling. - Native Controls & Icons: Implement Switch, Slider, SegmentedControl, DateTimePicker, and SF Symbols via expo-symbols with weights, scales, and animations. - Media, Storage & Effects: Camera and audio/video with expo-audio/expo-video, localStorage/SQLite/SecureStore persistence, blur and liquid glass effects, CSS gradients, and WebGPU/Three.js 3D scenes. - Use Case: When building a settings screen or camera flow in an Expo app, use this Skill to pick the right native control, apply semantic colors, add haptics, and decide whether Expo Go suffices or a custom build is required. ## Quick Start Use the expo-native-ui skill to build a native-feeling settings screen with semantic colors, a segmented control, and SF Symbol icons.

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 native semantic colors in an Expo app?

Use the Color API from expo-router, which wraps PlatformColor with type-safe access to iOS UIKit colors via Color.ios and Android Material 3 colors via Color.android. Wrap each value in Platform.select with a hex fallback for web, and centralize them in a theme/colors.ts file.

How do I add SF Symbols icons in React Native?

Use the SymbolView component from expo-symbols with a symbol name like square.and.arrow.up, plus tintColor, weight, and scale props. SF Symbols are Apple-only, so on Android use Material icons or a platform-specific asset instead.

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 older expo-av package is deprecated and should not be used in new Expo projects.

Does WebGPU and Three.js work in Expo Go?

No, WebGPU does not work in Expo Go. It requires react-native-wgpu with a custom build created via npx expo prebuild and npx expo run:ios, along with locked versions of three and @react-three/fiber.

When do I need a custom native 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 custom native configuration. Always try npx expo start with Expo Go first.

What should I use instead of AsyncStorage in Expo?

Use the localStorage polyfill from expo-sqlite/localStorage/install for simple key-value storage. For large datasets use full expo-sqlite, and for sensitive data like tokens use expo-secure-store.