building-native-ui

Build native UI screens with Expo Router and NativeTabs layouts.

Updated Sep 5, 2020

Search Tags:#navigation #react-native #tabs #expo #ui-patterns #expo-router #native-ui

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: building-native-ui
Source: https://github.com/dtorras/dotfiles/tree/main/config/claude/skills/building-native-ui
Command: npx skills add https://github.com/dtorras/dotfiles --skill building-native-ui-dtorras

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Builds a cohesive, scalable approach to creating native UI with Expo Router, consolidating styling, components, navigation, and patterns into a single, reusable guide.

Core Features & Use Cases

Provides patterns for structuring Expo Router apps with native UI conventions across screens
Covers styling, components, navigation, animations, and native tabs for consistent UX
Real-world scenarios include implementing native tab navigation, responsive layouts, and accessible UI patterns

Quick Start

Create a new Expo Router screen that follows native UI guidelines and wire it into a NativeTabs layout.

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 UI with Expo Router for consistent patterns across screens?▼

Build native UI with Expo Router by adhering to its _layout structure and applying pattern-driven components. This consolidates styling, components, and navigation into a cohesive, scalable guide for consistent UX across iOS and Android screens.

What is the best way to implement native tabs in a React Native Expo app?▼

Implement native tabs by wiring your screens into a NativeTabs layout using Expo Router. This provides consistent navigation patterns and native UI conventions across platforms within your React Native application.

Can I use Expo Router to create responsive layouts and accessible UI patterns for both iOS and Android?▼

Yes, Expo Router supports responsive layouts and accessible UI patterns across iOS and Android. It applies native UI conventions and pattern-driven components to ensure a consistent user experience on both platforms.

Does building native UI with Expo Router require specific file structure conventions?▼

Yes, building native UI with Expo Router requires adherence to the Expo Router _layout structure. This file-based organization enables consistent navigation, styling, and native tab layouts across your React Native application screens.

How do I wire a new screen into a native tabs layout using Expo Router?▼

Wire a new screen by creating it according to native UI guidelines and connecting it into your NativeTabs layout. This leverages Expo Router's pattern-driven components to maintain consistent navigation and styling conventions across the application.