skills.rest
json-choi
json-choiCOMMUNITY
Explore all skills by this author →
GitHub

building-native-ui

Guide React Native developers to build native UI with Expo Router.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Developers struggle to maintain consistent UI, navigation, and animation standards when building Expo Router apps, leading to fragmented designs and extra work.

Core Features & Use Cases

  • Guidelines: Comprehensive UI guidelines covering styling, components, navigation, animations, patterns, and native tabs.
  • References: In‑depth markdown reference files for animations, controls, gradients, icons, media, route structure, search, storage, tabs, and more.
  • Use Case: Follow the guide to create a clean, native‑look app with proper route structures, safe navigation, and iOS‑compliant visuals.

Quick Start

Start the app with Expo Go by running npx expo start and create a new screen following the guidelines.

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 a consistent native UI with Expo Router?▼

To build native UI with Expo Router, follow comprehensive guidelines covering styling, navigation, animations, and native tabs to ensure your React Native app maintains consistent visual standards and iOS-compliant visuals.

Do I need a specific Expo SDK version to use native tabs and animations?▼

Yes, implementing native tabs and animations requires Expo SDK 54 or higher along with the Expo Router framework to properly adhere to iOS Human Interface Guidelines.

What's the best way to structure routes for a React Native app using Expo Router?▼

The best way to structure routes is by following in-depth reference files for route structure and navigation patterns, ensuring safe navigation and a clean, native-look app design.

Can I use Expo Go to test styling and navigation guidelines?▼

Yes, you can start your app with Expo Go by running npx expo start and create new screens to test styling, components, and navigation guidelines directly.

What UI components and patterns do the Expo Router references cover?▼

The references cover markdown files for animations, controls, gradients, icons, media, route structure, search, storage, and native tabs for comprehensive UI development.

Why does my React Native app design feel fragmented without UI guidelines?▼

Your React Native app design feels fragmented because maintaining consistent UI, navigation, and animation standards manually leads to extra work and disjointed user experiences.

Related Skills

Explore More Software Engineering Skills→
anton-abyzovanton-abyzov
156

expo-workflow

Configure Expo SDK 54+ projects for EAS Build and Update workflows.

Community
Advanced
RipKDRRipKDR
2

react-native-architecture

Structure React Native apps with Expo Router and offline-first data patterns.

Community
Advanced
allanninalallanninal
1

vercel-react-native-skills

Apply React Native and Expo performance best practices for lists, animations, and components.

Community
Intermediate
oakossoakoss
14

react-native

Develop cross-platform iOS and Android apps with React Native and Expo.

Official
Intermediate