skills.rest
nawab69
nawab69COMMUNITY
Explore all skills by this author →
WebsiteGitHub

building-native-ui

Guide building native user interfaces with Expo Router for iOS and Android.

Updated Feb 27, 2026
Search Tags:#navigation#animations#react-native#ui-design#expo#expo-router#native-tabs
One-click install
npx skills add https://github.com/nawab69/pouch-monorepo --skill building-native-ui-nawab69
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-native-ui
Source: https://github.com/nawab69/pouch-monorepo/tree/main/apps/mobile/.agents/skills/building-native-ui
Command: npx skills add https://github.com/nawab69/pouch-monorepo --skill building-native-ui-nawab69

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guide removes uncertainty and repetition when building native-feeling user interfaces with Expo Router by providing clear conventions, migration guidance, and platform-specific UI patterns so teams can deliver consistent, responsive apps faster.

Core Features & Use Cases

  • Routing & Structure: Clear route file conventions, dynamic routes, group routes, and layout rules to keep navigation predictable and maintainable.
  • Native Navigation & Tabs: NativeTabs integration, stack nesting patterns, header and toolbar composition, and migration advice from JS tabs for iOS and Android.
  • Styling & Visuals: Guidance on safe area handling, gradients (New Architecture), blur and liquid glass effects, SF Symbols, and recommended component libraries.
  • Interactions & Media: Reanimated-driven animations, gesture patterns, camera/media handling, storage recommendations, and form-sheet/modal patterns for common flows.
  • Use Case: Migrate a tabbed Expo app to NativeTabs with native headers, add animated list transitions, and implement a camera screen with liquid glass controls and proper permission handling.

Quick Start

Start the app in Expo Go by running npx expo start, scan the QR code, and verify navigation, tabs, styling, and animations work on a device.

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 navigation and tabs with Expo Router?▼

To build native navigation with Expo Router, apply NativeTabs integration for iOS and Android, establish predictable route file conventions, and nest stack layouts with composed headers and toolbars to maintain structure.

Can I use liquid glass and blur effects in React Native?▼

Yes, you can implement liquid glass and blur effects in React Native by utilizing the expo-glass-effect package alongside safe area handling and gradients enabled under the New Architecture.

What's the best way to add animations to an Expo app?▼

The best way to add animations to an Expo app is using Reanimated-driven animation patterns to handle gesture interactions and animated list transitions smoothly across iOS and Android.

Does this Expo Router guide support custom native builds and Expo Go?▼

Yes, this Expo Router guide applies to both Expo-managed and bare React Native projects, providing specific guidance on when to use Expo Go versus custom native builds for platform visual effects.

How do I handle camera permissions and media in React Native?▼

Handle camera permissions and media in React Native by implementing camera/media handling patterns with proper permission flows and form-sheet modal presentations for common app workflows.

How do I migrate JS tabs to native tabs in Expo?▼

Migrate JS tabs to native tabs in Expo by following the provided NativeTabs integration migration advice, replacing JS tab implementations with native headers and toolbars for iOS and Android.

Related Skills

Explore More Software Engineering Skills→
duanbiao2000duanbiao2000
3

react-native-architecture

Architect scalable React Native apps with Expo-based modular structure and TypeScript.

Community
Advanced
CJHarmathCJHarmath

rn-native-features

Implement native iOS features in Expo React Native apps.

Community
Intermediate
makerjackiemakerjackie

building-native-ui

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

Community
Intermediate
FutureAtomsFutureAtoms
1

react-native-2026-expo-router

Configures Expo Router v6 for file-based routing in React Native apps.

Community
Intermediate