skills.rest
truongnat
truongnatCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-native-design

A data-driven approach to evaluating LLMs.

Updated Mar 5, 2026
Search Tags:#performance#cross-platform#react-native#ui styling#react navigation#gesture handler#reanimated 3
One-click install
npx skills add https://github.com/truongnat/emplus --skill react-native-design-truongnat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-design
Source: https://github.com/truongnat/emplus/tree/main/.agents/skills/react-native-design
Command: npx skills add https://github.com/truongnat/emplus --skill react-native-design-truongnat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design React Native interfaces that look consistent across iOS and Android while delivering smooth navigation and performant animations.

Core Features & Use Cases

  • Styling that scales across platforms: Create reliable UI styles with StyleSheet, dynamic styling, and Platform-specific adjustments for iOS/Android.
  • Navigation patterns you can type and trust: Set up Stack and Tab navigation using React Navigation 6+ with safe route/param typing for screens and dynamic header options.
  • High-performance animations with Reanimated 3: Implement performant shared-value animations and gesture-driven interactions using react-native-gesture-handler plus Reanimated worklets.
  • Layout and performance best practices: Use responsive layout patterns (Flexbox) and efficiency tactics like FlatList for long lists and avoiding render jank.

Quick Start

Use the react-native-design skill to scaffold a Home → Detail flow with typed navigation and a Reanimated 3 animated card component for performant cross-platform UI.

Frequently Asked Questions about react-native-design

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

FAQPage Schema
How do I set up typed React Navigation with Stack and Tab routers in React Native?▼

To set up typed React Navigation, configure Stack and Tab routers using React Navigation 6+ with safe route and param typing for screens and dynamic header options to ensure strict type safety across your navigation structure.

What's the best way to build performant gesture-driven animations in React Native?▼

Performant gesture-driven animations are best built using Reanimated 3 shared values and worklets integrated with react-native-gesture-handler, enabling smooth UI interactions by running animation logic directly on the UI thread.

How do I create consistent cross-platform UI styling for iOS and Android in React Native?▼

Consistent cross-platform UI styling is created using StyleSheet for base styles, dynamic styling techniques, and Platform-specific logic to apply targeted adjustments for iOS and Android individually.

Why does my React Native FlatList cause render jank on long lists?▼

FlatList render jank on long lists often occurs without proper performance tactics; using FlatList's built-in virtualization and applying responsive Flexbox layout patterns helps avoid render jank and maintain smooth scrolling.

Can I use Reanimated 3 worklets with react-native-gesture-handler for cross-platform screens?▼

Yes, Reanimated 3 worklets can be integrated with react-native-gesture-handler to build gesture-driven interactions and animated components that deliver native-feel performance across iOS and Android screens.

Related Skills

Explore More Software Engineering Skills→
mrodrigues1mrodrigues1

react-native-design

Implement React Native styling, React Navigation, and Reanimated 3 animations.

Community
Intermediate
williamzujkowskiwilliamzujkowski
17

react-native-mobile-development

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

Community
Intermediate
chaitinchaitin
5

react-native-design

Standardizes styling, navigation, and motion patterns for React Native apps using React Navigation and Reanimated.

Official
Advanced
crozzbitecrozzbite

react-native

Implement consistent React Native patterns for Expo and bare workflow apps.

Community
Advanced