expo-native-ui

Mechanism

When It Triggers · How It Works · What It Produces

Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.

Trigger

When building or styling Expo screens that should feel native on iOS/Android, especially following Apple HIG, using semantic colors, native controls, SF Symbols, animations, or responsive layout.

Working Mechanism

Loads reference docs (animations, controls, gradients, icons, media, storage, visual-effects, webgpu-three) as needed
Enforces library preferences (expo-image for SF Symbols, Color from expo-router, no legacy modules)
Applies code style, responsiveness, and styling rules from the guide
Recommends Expo Go first, custom builds only when required

Result

Native-feeling Expo UI code with correct semantic colors, safe-area handling, animations, and platform-adaptive styling; pairs with expo-router for navigation.

Use Cases

Two Typical Use Cases

Scenario 01

Build native settings screen in Expo

A developer is creating a new settings screen in an Expo app and wants it to look native on iOS and Android. They use the expo-native-ui skill to apply semantic colors via Color from expo-router, native Switch/Slider controls, safe-area ScrollView, and tabular-nums counters. The skill ensures correct library choices and HIG compliance, delivering a polished screen without manual theming work.

Scenario 02

Add animated glass cards with SF Symbols

A team needs to add animated, blur-backed cards with SF Symbols to their Expo app. Using expo-native-ui, they consult icons.md and visual-effects.md, use expo-image sf: source and expo-glass-effect, follow animation and shadow rules, and run in Expo Go first. The result is consistent native UI with liquid-glass effects and proper symbols, reducing trial-and-error.

Skill Relationships

Which Skills I Use · Which Skills Use Me

Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.

Tier 1 · These Skills Use Me

expo-routerStyle Guide / Workflow

Tier 2 · Current Skill

expo-native-uiStyle Guide

Tier 3 · I Use These Skills

expo-routerStyle Guide / Workflow

Full Relationship Graph

Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.

Skill File

SKILL.md

Open in GitHub ↗

SKILL.mdLoading from GitHub…

Skill Composition

Open in GitHub ↗

SKILL.md10.0%
references80.0%
other10.0%

▸skills/expo-native-ui/
▸root
- ·SKILL.md
- ▸agents
  - ·openai.yaml
- ▸references
  - ·animations.md
  - ·controls.md
  - ·gradients.md
  - ·icons.md
  - ·media.md
  - ·storage.md
  - ·visual-effects.md
  - ·webgpu-three.md

Per the Agent Skills spec, SKILL.md is the only required file. The colored bars classify the rest into the three spec-aligned optional directories (scripts / references / assets) and an 'other' bucket. The full directory tree is below.

Related in Skillset

You May Also Need These Skills

expo-examples

Expo Examples gives the canonical ~70 `with-*` integration patterns from expo/examples. It helps you find, read, and adapt the version-matched setup for third-party libs into an existing app, or scaffold a new one via `npx create-expo --example`. Value: avoid hand-rolled, mismatched integrations with official, maintained patterns.

Workflow

expo-web-to-native

Migrates an existing web React app to native iOS/Android with Expo by scaffolding a shell, running the web UI in DOM components on day one, then strangling screens to native by value using @expo/ui and expo-router. Produces a shippable native app that reuses web code incrementally with verified parity.

Workflow

expo-data-fetching

Helps implement and debug any network request, API call, or data fetching in Expo apps. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router loaders. Produces secure, correct networking code with auth and offline readiness, reducing bugs.

Style Guide · Workflow

eas-workflows

Helps developers understand and write EAS CI/CD workflow YAML files for Expo projects. Fetches live JSON schema and docs via a Node script, generates/edits .eas/workflows/*.yml, and validates against the schema. Delivers schema-conformant pipelines and accurate workflow answers for build/deploy automation.

Workflow

/expo-native-ui

When It Triggers · How It Works · What It Produces

Trigger

Working Mechanism

Result

Two Typical Use Cases

Build native settings screen in Expo

Add animated glass cards with SF Symbols

Which Skills I Use · Which Skills Use Me

Full Relationship Graph

SKILL.md

Skill Composition

You May Also Need These Skills

expo-examples

expo-web-to-native

expo-data-fetching

eas-workflows

When It Triggers · How It Works · What It Produces

Trigger

Working Mechanism

Result

Two Typical Use Cases

Build native settings screen in Expo

Add animated glass cards with SF Symbols

Which Skills I Use · Which Skills Use Me

Full Relationship Graph

SKILL.md

Skill Composition

You May Also Need These Skills

expo-examples

expo-web-to-native

expo-data-fetching

eas-workflows