skills.rest
makerjackie
makerjackieCOMMUNITY
Explore all skills by this author →
𝕏@maker_jackieGitHub

building-native-ui

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

Updated Feb 20, 2026
Search Tags:#navigation#react-native#expo#expo-router#ui-guidelines#native-tabs#reanimated
One-click install
npx skills add https://github.com/makerjackie/jackie-skills-cn-top50 --skill building-native-ui-makerjackie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-native-ui
Source: https://github.com/makerjackie/jackie-skills-cn-top50/tree/main/skills/building-native-ui
Command: npx skills add https://github.com/makerjackie/jackie-skills-cn-top50 --skill building-native-ui-makerjackie

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers design and implement native-feeling mobile applications with Expo Router by removing uncertainty around route structure, navigation composition, styling, and platform-specific UI behaviors.

Core Features & Use Cases

  • Routing & Layout: Conventions for app directory layout, dynamic and group routes, and using _layout.tsx to compose stacks and NativeTabs.
  • UI & Styling: Rules for responsive layouts, safe area handling, shadows and gradients, glass/blur visual effects, and using SF Symbols via expo-image.
  • Interactions & Media: Guidance for Reanimated-driven animations, gesture handling, camera/audio/video integration, form sheets, and toolbar/header composition.
  • Use Case: Scaffold an Expo app with NativeTabs and per-tab stacks, add search and media screens, and ensure the app runs in Expo Go before creating custom builds.

Quick Start

Create an Expo Router app and ask to scaffold NativeTabs with a stack per tab, a responsive home screen, example Reanimated animations, and media handling using expo-image and expo-video.

Frequently Asked Questions about building-native-ui

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

FAQPage Schema
How do I structure Expo Router navigation with NativeTabs and stack layouts?▼

Structure Expo Router navigation by using the app directory layout with _layout.tsx to compose NativeTabs and stack navigators, ensuring proper route hierarchy and responsive layouts for React Native apps.

How do I add Reanimated animations to a React Native Expo app?▼

Add Reanimated animations by applying Reanimated-driven animation patterns for gestures and transitions, ensuring your Expo app runs properly in Expo Go before implementing custom native builds.

Does Expo Router support responsive layouts and safe area handling on iOS and Android?▼

Yes, Expo Router supports responsive layouts and native-safe-area handling on iOS and Android, providing conventions for safe area insets, shadows, gradients, and glass/blur visual effects.

How do I use SF Symbols in React Native with expo-image?▼

Use SF Symbols in React Native by integrating expo-image to render native SF Symbols, applying Expo Router UI guidelines for consistent visual styling across iOS and Android platforms.

What is the best way to implement media controls in an Expo app?▼

Implement media controls in Expo apps by following native toolbar and header composition conventions, integrating camera, audio, and video handling with expo-video and expo-image.

When should I check if my Expo app runs in Expo Go before adding native UI patterns?▼

Check if your Expo app runs in Expo Go first before creating custom builds, ensuring that NativeTabs, Reanimated animations, and media handling conventions function correctly in the standard Expo environment.

Related Skills

Explore More Software Engineering Skills→
dtorrasdtorras

building-native-ui

Build native UI screens with Expo Router and NativeTabs layouts.

Community
Advanced
FilenCloudDiensteFilenCloudDienste
34

expo-dev-client

Build and distribute Expo development clients for testing native code changes.

Official
Intermediate
karthiknishkarthiknish
2

react-native-design

Provide React Native UI, navigation, and animation patterns with Reanimated 3 and Gesture Handler.

Community
Advanced
FutureAtomsFutureAtoms
1

react-native-2026-expo-router

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

Community
Intermediate