skills.rest
ravnhq
ravnhqOFFICIAL
Explore all skills by this author →
WebsiteGitHub

building-native-ui

Implement native UI patterns with Expo Router for iOS and Android apps.

3|Updated Apr 3, 2026
Search Tags:#patterns#navigation#react-native#expo#expo-router#native-ui#glass-effects
One-click install
npx skills add https://github.com/ravnhq/typescript-blueprint --skill building-native-ui-ravnhq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-native-ui
Source: https://github.com/ravnhq/typescript-blueprint/tree/main/.agents/skills/building-native-ui
Command: npx skills add https://github.com/ravnhq/typescript-blueprint --skill building-native-ui-ravnhq

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building modern Expo-based apps with native-like UI can be complex without a reusable blueprint for navigation, styling, and platform-specific components.

Core Features & Use Cases

  • Navigation patterns: stacks, tabs, and header/toolbars to create cohesive flows.
  • Visual styling: guidelines for glass effects, gradients, and responsive layouts to ensure consistency across screens.
  • Platform-specific guidance: iOS toolbars, sheets, and native tab patterns to match platform expectations.
  • Use Case: when starting a new Expo project, apply these guidelines to rapidly assemble a polished, scalable UI architecture.

Quick Start

Review the guidelines and apply the patterns to an existing or new Expo Router project to implement a polished native UI.

Frequently Asked Questions about building-native-ui

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

FAQPage Schema
How do I implement native tabs and stack navigation in Expo Router?▼

Native tabs and stack navigation in Expo Router are implemented using concrete component patterns for NativeTabs and Stack routing, ensuring cohesive screen flows and matching platform expectations across iOS and Android.

What's the best way to add glass effects and gradients to a React Native app?▼

Glass effects and gradients in a React Native app are best applied using the visual styling guidelines provided, ensuring consistent modern UI appearance across responsive layouts without manual trial and error.

Can I build platform-specific iOS toolbars and sheets with Expo Router?▼

Yes, you can build platform-specific iOS toolbars and sheets with Expo Router by following the provided platform-specific guidance, which matches native iOS expectations using defined component rules.

Do I need any external dependencies to use these Expo Router UI patterns?▼

No external dependencies are required to use these Expo Router UI patterns, as the guidelines rely on standard Expo Router components and styling rules to assemble a polished, scalable UI architecture.

How do I structure accessibility and responsive layouts for an Expo app?▼

Accessibility and responsive layouts for an Expo app are structured by applying the defined best practices and concrete rules for styling, layout, and navigation patterns to ensure consistency across screens.

Related Skills

Explore More Software Engineering Skills→
MarcoAntoliniMarcoAntolini
1

react-native-expo

Optimize React Native and Expo apps with Expo Router and NativeWind.

Community
Advanced
expoexpo
2.4k

eas-app-stores

Deploy Expo apps to iOS and Android stores using EAS CLI.

Official
Advanced
BEE-CODEDBEE-CODED
1

react-native-expo

Enforce React Native and Expo managed workflow conventions for mobile development.

Official
Intermediate
voidrotvoidrot

react-native-design

Design React Native user interfaces with styling, navigation, gestures, and animations.

Community
Advanced