skills / expo / skills / building-native-ui

Building Native UI

A verified Expo skill for building native-quality app interfaces with Expo Router, platform controls, animations, and production-safe UI patterns.

Source description: Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

npx skills add https://github.com/expo/skills --skill building-native-ui
risk: mediuminstall: CLIverified: 2026-02-15

On this page

Our added value (verification layer)

This page is not only a source mirror. We add reproducibility, risk controls, and operations guidance on top of the original skill definition.

  • Execution/Security/Maintainability scoring with explicit criteria
  • Compatibility matrix across runtime environments
  • Verification log with check commands and observed outcomes
  • Common failure fixes and rollback triggers for production safety

Overall score

85/100

Execution

88

Security

80

Maintainability

86

Quick install (universal)

Primary command for most environments:

npx skills add https://github.com/expo/skills --skill building-native-ui

Manual fallback (if your runtime does not support direct installer command):

  1. npx -y skills add https://github.com/expo/skills --skill building-native-ui -y -g
  2. Restart your current agent/runtime so the new skill is loaded.
  3. Run a dry run: "design this Expo screen with native iOS/Android controls and animation guidance".
  • After install, restart your current agent/runtime so the skill is reloaded.
  • Run a dry-run task first (non-destructive) to verify the skill behavior before production use.

SKILL.md (source preview)

Short preview shown here to keep this page focused on our verification layer.

Expo UI Guidelines References Consult these resources as needed: Running the App CRITICAL: Always try Expo Go first before creating custom builds. Most Expo apps work in Expo Go without any custom native code. Before running npx expo run:ios or npx expo run:android : 1. Start with Expo Go : Run npx expo start and scan the QR code with Expo Go 2. Check if features work : Test your app thoroughly in Expo Go 3. Only create custom builds when required see below When Custom Builds...

View full SKILL.md source page →

Required permissions

file

Compatibility matrix

EnvironmentStatusNotes
Expo Router projectspassDirectly aligned with Expo-first UI architecture and component references.
Generic React Native projectspartialMost guidance applies, but some Expo-specific APIs need adaptation.
Web-only React projectsfailGuidance centers on native mobile UI and platform controls.

Verification log

Canonical install command executed

npx -y skills add https://github.com/expo/skills --skill building-native-ui -y -g

Pass

result: pass

Canonical source exists locally

test -f ~/.agents/skills/building-native-ui/SKILL.md

Pass

result: pass

Installed skill directory listed

ls -la ~/.agents/skills | rg "building-native-ui"

Pass

result: pass

Frontmatter + full body extracted

read ~/.agents/skills/building-native-ui/SKILL.md and split description/body

Pass

result: pass

Security notes

  • Review third-party UI libraries before adding to production dependencies.
  • Validate permissions for media/device APIs when implementing native controls.
  • Run mobile QA across devices to prevent gesture/navigation regressions.

Common failures and fixes

Inconsistent platform look-and-feel

Use platform-specific components and spacing/typography rules from references.

Janky screen transitions

Move heavy work off the UI thread and apply recommended Reanimated patterns.

Layout breaks on smaller devices

Adopt responsive constraints and safe-area-aware layout primitives.

Quick FAQ

How do I install this skill quickly?

Run npx skills add https://github.com/expo/skills --skill building-native-ui, then restart your runtime to reload skills.

What should I check before production rollout?

Confirm permissions, run a non-destructive dry run, and review rollback triggers.

What if install succeeds but actions do not run?

Verify SKILL.md location, restart runtime, and check environment/dependency readiness.

Recent changes

  • 2026-02-15: Added hot-skill page entry from competitor ranking gap analysis.
  • 2026-02-15: Installed canonical source and synced exact frontmatter description plus full SKILL.md body.
  • 2026-02-15: Added verification layer (score, compatibility, fixes, rollback, and FAQ-ready structure).

Rollback triggers

  • New UI architecture introduces navigation regressions in production.
  • Animation changes degrade performance on target low-end devices.
  • Platform QA flags accessibility or safe-area handling regressions.

Known issues

Reference scope is broad and can overwhelm small tasks

Start from one focused reference file per task.

Expo-specific assumptions may not map 1:1 to bare RN apps

Translate APIs to bare React Native equivalents where needed.

Related tutorials

Site references