skills.rest
aadilmallick
aadilmallickCOMMUNITY
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 13, 2026
Search Tags:#mobile design#react native#expo#semantic colors#sf symbols#native ui#ios styling
One-click install
npx skills add https://github.com/aadilmallick/myfitness-pal-clone --skill expo-native-ui-aadilmallick
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-native-ui
Source: https://github.com/aadilmallick/myfitness-pal-clone/tree/main/.agents/skills/expo-native-ui
Command: npx skills add https://github.com/aadilmallick/myfitness-pal-clone --skill expo-native-ui-aadilmallick

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires expo-symbols, expo-blur, expo-glass-effect, expo-camera, expo-audio, expo-video, expo-sqlite, expo-router, react-native-safe-area-context, @expo/ui, 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 color systems, and platform-specific components. This Skill provides the guidelines and reference recipes to build screens that match each platform's design language without guesswork. ## Core Features & Use Cases - Semantic Color System: Use the Color API from expo-router with a centralized theme/colors.ts palette that auto-adapts to light/dark mode on iOS and Android. - Native Controls & Icons: Recipes for Switch, Slider, SegmentedControl, DateTimePicker, and SF Symbols via expo-symbols with Material icon fallbacks on Android. - Visual Effects & Media: Blur views, liquid glass effects (iOS 26+), CSS gradients, camera/audio/video integration, and local storage patterns with expo-sqlite. - Use Case: When building a settings screen for an Expo app, use this Skill to pick native controls, apply semantic colors, add haptics, and decide whether Expo Go is sufficient before creating a custom native build. ## Quick Start Use the expo-native-ui skill to style my Expo settings screen with native controls, semantic colors, 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 semantic colors in Expo for light and dark mode?▼

Use the Color API from expo-router, which wraps PlatformColor with type-safe access to iOS UIKit colors (Color.ios.*) and Android Material 3 colors (Color.android.dynamic.*). Centralize values in a theme/colors.ts file using Platform.select with hex fallbacks for web.

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 provide Material icon equivalents on Android via @expo/vector-icons or the md prop on NativeTabs triggers.

Does Expo Go support all expo packages or do I need a custom build?▼

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

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 in new Expo projects.

When should I use @expo/ui versus React Native built-in components?▼

Prefer @expo/ui for sheets, pickers, sliders, toggles, menus, and grouped-form sections since it renders real SwiftUI and Jetpack Compose controls in Expo Go on SDK 56+. Fall back to React Native built-ins or community libraries only when @expo/ui lacks the needed component.

Why do CSS gradients not work in my Expo app?▼

CSS gradients via the experimental_backgroundImage style property require React Native's New Architecture (Fabric). They are unavailable in the old architecture and in Expo Go, so verify your project runs the New Architecture before using them.

Related Skills

Explore More Software Engineering Skills→
SajinthanSajinthan

screen

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

Community
Advanced
carlos3gcarlos3g
2

expo-deployment

Automate Expo app deployment to iOS, Android, web, and API routes with EAS.

Community
Intermediate
bmiit145bmiit145

expo-animation

Builds React Native and Expo animations with Reanimated, Gesture Handler, and haptics.

Community
Advanced
xiaobuliukunxiaobuliukun

gluestack-ui-v4:performance

Implement cross-platform performance optimizations for Gluestack UI v4 components.

Community
Advanced