skills.rest
gmackie
gmackieCOMMUNITY
Explore all skills by this author →
Website𝕏@grahammackieGitHub

expo-native-ui

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

Updated Mar 27, 2026
Search Tags:#Expo#react-native#mobile UI#semantic colors#reanimated#sf symbols#apple HIG
One-click install
npx skills add https://github.com/gmackie/agent-skills --skill expo-native-ui-gmackie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-native-ui
Source: https://github.com/gmackie/agent-skills/tree/main/skills/expo-native-ui
Command: npx skills add https://github.com/gmackie/agent-skills --skill expo-native-ui-gmackie

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 APIs match Apple HIG and Android Material conventions, and which legacy libraries to avoid. This Skill encodes those decisions so generated screens use semantic colors, native controls, SF Symbols, and correct safe-area behavior by default. ## Core Features & Use Cases - Native styling system: Apply Apple HIG styling with the type-safe Color API from expo-router, CSS boxShadow, continuous border curves, and automatic light/dark adaptation. - Component and library guidance: Choose between @expo/ui native controls, React Native built-ins, and modern replacements (expo-audio, expo-video, expo-image) while avoiding removed or legacy modules. - Deep reference coverage: Consult dedicated references for Reanimated animations, native controls, CSS gradients, SF Symbols, camera/media, storage, blur and liquid glass effects, and WebGPU/Three.js 3D scenes. - Use Case: When asked to build a settings screen or camera flow in an Expo app, the agent produces code using @expo/ui controls, semantic colors, haptics, and glass effects, and knows whether Expo Go suffices or a custom build is required. ## Quick Start Use the expo-native-ui skill to build a native-feeling profile screen with semantic colors, SF Symbol icons, and a scroll-responsive layout.

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 an Expo app?▼

Follow Apple HIG styling with flexbox layouts, semantic colors via the Color API from expo-router, and native controls from @expo/ui, which renders real SwiftUI and Jetpack Compose. Wrap routes in ScrollView with contentInsetAdjustmentBehavior set to automatic for correct safe areas.

What library should I use for pickers, sliders, and switches in Expo?▼

Use @expo/ui first, since its Slider, Switch, Picker, Menu, and SegmentedControl render as native SwiftUI and Jetpack Compose and work in Expo Go on SDK 56+. Fall back to React Native built-ins or community packages only when @expo/ui does not cover the case.

Does Expo Go support camera, animations, and push notifications?▼

Expo Go supports all expo-* packages, Expo Router navigation, Reanimated, gesture handler, push notifications, and deep links out of the box. Custom builds via npx expo run:ios or eas build are only needed for local native modules, Apple targets, or third-party native code like WebGPU.

How do I use SF Symbols in React Native with Expo?▼

Render SF Symbols with expo-image using an sf:name source or the SymbolView component, specifying name, weight, scale, and tintColor. Avoid FontAwesome, Ionicons, and other vector icon libraries to keep a native look.

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 legacy and should not be used. The same rule applies to other deprecated modules like AsyncStorage, expo-permissions, and react-native SafeAreaView.

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

CSS gradients via the experimental_backgroundImage style property require React Native's New Architecture and do not work in the old architecture or Expo Go. Do not use expo-linear-gradient; create a custom build when gradients are required.

Related Skills

Explore More Software Engineering Skills→
CYRUS-pintoCYRUS-pinto

expo-router

Implements file-based navigation and routing for Expo Router apps.

Community
Intermediate
fyndxfyndx
1

expo-deployment

Deploy Expo applications to iOS, Android, and web via EAS.

Official
Advanced
tamaguitamagui
14.1k

tamagui

Guide Tamagui design system usage with tokens, themes, and component patterns.

Official
Intermediate
openshift-engopenshift-eng
7

microshift-release:release-versions

Determine MicroShift release availability and generate a structured Markdown report.

Official
Intermediate