skills.rest
sofia-municipality
sofia-municipalityOFFICIAL
Explore all skills by this author →
WebsiteGitHub

building-native-ui

Define and apply Expo Router UI guidelines for native-looking interfaces.

9|7|Updated Oct 6, 2025
Search Tags:#navigation#react-native#tabs#expo#expo-router#ui-guidelines#native-ui
One-click install
npx skills add https://github.com/sofia-municipality/your-sofia-mobile --skill building-native-ui-sofia-municipality
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-native-ui
Source: https://github.com/sofia-municipality/your-sofia-mobile/tree/main/.github/skills/building-native-ui
Command: npx skills add https://github.com/sofia-municipality/your-sofia-mobile --skill building-native-ui-sofia-municipality

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Expo Router UI development can be verbose and inconsistent; this Skill provides a complete set of guidelines to help developers build native-feeling interfaces quickly.

Core Features & Use Cases

  • Native look and feel with consistent header, tabs, and toolbars across Expo Router apps.
  • Guidance on routes, styling conventions, responsiveness, and accessibility for common patterns like tabs, stacks, and modals.
  • Real-world examples and best practices for integrating glass blur, gradients, and SF Symbols.

Quick Start

Follow these guidelines to scaffold an Expo Router UI that uses native tabs, glass effects, and consistent headers.

Frequently Asked Questions about building-native-ui

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

FAQPage Schema
How do I build native-feeling UI with Expo Router tabs and stacks?▼

Expo Router UI guidelines define routing patterns, styling conventions, and navigation behaviors for tabs, stacks, and modals to ensure interfaces look and behave consistently like native applications across platforms.

Does Expo Router support native tabs and glass blur effects?▼

Yes, Expo Router supports native tabs and glass blur effects by integrating optional libraries like expo-glass-effect, expo-blur, and SF Symbols for icons to deliver polished, native-looking interfaces with real-world visual depth.

What's the best way to structure navigation patterns for modals in Expo Router?▼

The best way to structure modals in Expo Router is to follow specific UI guidelines for routing patterns and navigation behaviors, ensuring accessible and responsive modal presentations within your stack layouts.

How do I apply accessibility and responsiveness to Expo Router components?▼

Apply accessibility and responsiveness to Expo Router components by adhering to defined styling conventions and UI guidelines, ensuring that reusable UI components across tabs, stacks, and modals remain accessible on various screen sizes.

Why does my Expo Router UI look inconsistent across different screens?▼

Expo Router UI looks inconsistent when developers lack a complete set of guidelines for headers, tabs, and toolbars; applying standardized styling conventions and reusable components resolves these verbose and inconsistent formatting issues.

Related Skills

Explore More Software Engineering Skills→
makerjackiemakerjackie

building-native-ui

Implement Expo Router navigation with NativeTabs, stacks, and Reanimated animations.

Community
Intermediate
NathanColosimoNathanColosimo

building-native-ui

Guide native UI patterns for Expo Router apps with styling and navigation.

Community
Intermediate
sao-codingsao-coding

building-native-ui

Define navigation, tabs, and native UI conventions for Expo Router apps.

Community
Intermediate
gounthargounthar

expo-router-expert

Configure Expo Router file-based routing with dynamic routes and layouts.

Community
Advanced