building-native-ui

Build native Expo Router interfaces with platform-specific navigation and UI patterns.

1|Updated Jun 27, 2026

Search Tags:#typescript #mobile design #navigation #expo router #reanimated #sf symbols #native ui

Ready to run

npx skills add https://github.com/babually/bongo-template --skill building-native-ui-babually

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: building-native-ui
Source: https://github.com/babually/bongo-template/tree/main/.agents/skills/building-native-ui
Command: npx skills add https://github.com/babually/bongo-template --skill building-native-ui-babually

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design and implement high-quality native app interfaces in Expo Router without guessing at platform-specific patterns, styling details, or navigation structure.

Core Features & Use Cases

Expo Router Navigation: Build stacks, tabs, modals, sheets, and route structures that follow native conventions.
Native UI Patterns: Apply platform-appropriate controls, SF Symbols, search bars, toolbars, blur, glass effects, and responsive layouts.
Animation and Media Guidance: Add performant Reanimated interactions, camera and playback flows, storage patterns, and 3D/WebGPU support when needed.
Use Case: A team building a production Expo app can use this Skill to create a tabbed interface with searchable lists, animated transitions, native headers, and consistent styling across web and mobile.

Quick Start

Ask for a native Expo Router screen or component layout and describe the route, controls, and visual behavior you want.

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

You can build native Expo Router screens by implementing stacks, tabs, modals, and sheets that follow native conventions. This Skill provides layout patterns for headers, search bars, and route structures specific to iOS-first designs.

What's the best way to implement native UI patterns like SF Symbols and blur effects in Expo?▼

To implement native UI patterns in Expo, apply platform-appropriate controls, SF Symbols, toolbars, and glass effects. This Skill guides you through using native controls to ensure consistent styling across mobile and web layouts.

How do I add performant animations to Expo Router components using Reanimated?▼

Add performant animations to Expo components using Reanimated for smooth interactions and transitions. This Skill provides guidance on implementing native animation patterns without compromising mobile app performance.

Can I use native search bars and sheet layouts in a cross-platform Expo app?▼

Yes, you can use native search bars and sheet layouts in a cross-platform Expo app. This Skill helps you design responsive mobile layouts and platform-specific controls that work consistently across web and mobile environments.

Does Expo Router support platform-specific styling and native controls for production apps?▼

Expo Router supports platform-specific styling and native controls for production apps. This Skill helps you implement high-quality native interfaces without guessing at styling details or platform-specific navigation structures.

How do I set up camera and media playback flows in a native Expo Router layout?▼

Set up camera and media playback flows in Expo Router by following native interaction patterns. This Skill provides guidance for integrating media flows, storage patterns, and 3D/WebGPU support within your app's UI.