skills.rest
AIBiz-Automatyzacje
AIBiz-AutomatyzacjeCOMMUNITY
Explore all skills by this author →
GitHub

expo-native-ui

Builds native-feeling Expo screens with semantic colors, SF Symbols, animations, and platform controls.

16|1|Updated May 5, 2026
Search Tags:#react native#expo#reanimated#mobile ui#ios design#sf symbols#native components
One-click install
npx skills add https://github.com/AIBiz-Automatyzacje/workspace-template-mobile --skill expo-native-ui-aibiz-automatyzacje
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-native-ui
Source: https://github.com/AIBiz-Automatyzacje/workspace-template-mobile/tree/main/.claude/skills/expo-native-ui
Command: npx skills add https://github.com/AIBiz-Automatyzacje/workspace-template-mobile --skill expo-native-ui-aibiz-automatyzacje

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? React Native apps often look and feel non-native because developers use deprecated components, hardcoded colors, and web-style patterns. This Skill provides opinionated guidelines for building Expo screens that follow Apple Human Interface Guidelines, adapt to light/dark mode automatically, and use the correct modern Expo APIs. ## Core Features & Use Cases - Native Styling System: Semantic colors via the Color API from expo-router, CSS boxShadow, continuous border curves, and safe-area-aware ScrollView layouts. - Component & Library Guidance: Enforces modern choices like @expo/ui native controls, expo-audio/expo-video over expo-av, SF Symbols over icon fonts, and localStorage over AsyncStorage. - Deep Reference Docs: Covers Reanimated animations, native controls, CSS gradients, camera/media capture, SQLite storage, blur and liquid glass effects, and WebGPU/Three.js 3D graphics. - Use Case: When asked to build a settings screen or camera flow in an Expo app, the Skill produces code with native switches, haptics, glass buttons, and theme-adaptive colors instead of generic cross-platform widgets. ## Quick Start Ask the AI to build a native-feeling Expo screen, such as a settings page with toggles and a profile header, following the expo-native-ui guidelines.

Frequently Asked Questions about expo-native-ui

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

FAQPage Schema
How do I make a React Native app look native on iOS?▼

Use semantic colors from the Color API in expo-router, SF Symbols via expo-symbols, native controls from @expo/ui, and follow Apple Human Interface Guidelines for spacing and layout. Wrap screens in ScrollView with contentInsetAdjustmentBehavior for correct safe areas.

How do I add dark mode support in an Expo app?▼

Use the Color API from expo-router, which wraps PlatformColor and automatically adapts to light and dark mode on iOS. On Android, call useColorScheme in components so they re-render when the theme changes, and centralize values in a theme/colors.ts file.

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

Does Expo Go support all native UI features?▼

Expo Go supports all expo-* packages, Expo Router, Reanimated, and @expo/ui components on SDK 56+. Custom builds are only required for local native modules, Apple targets like widgets, third-party native code, or WebGPU via react-native-wgpu.

What should I use instead of AsyncStorage in Expo?▼

Use the localStorage polyfill from expo-sqlite for simple key-value data, full expo-sqlite for relational data and complex queries, and expo-secure-store for sensitive values like tokens and passwords.

Why can't I use CSS gradients in Expo Go?▼

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 a custom development build is needed.

Related Skills

Explore More Software Engineering Skills→
SajinthanSajinthan

screen

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

Community
Advanced
hjemmesidekongenhjemmesidekongen
1

expo-deployment

Manage Expo app deployment with EAS Build and EAS Update.

Community
Advanced
bugrabilgebugrabilge
10

mobile-design

Guide mobile UI/UX design with iOS HIG and Android Material Design patterns.

Community
Intermediate
toanalientoanalien

mobile-development

Develop iOS and Android apps with React Native, Flutter, Swift, or Kotlin.

Community
Advanced