skills.rest
duanbiao2000
duanbiao2000COMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-native-design

Provide React Native styling, navigation, and animation patterns for cross-platform UI.

3|1|Updated Feb 3, 2026
Search Tags:#theming#cross-platform#animations#react-native#mobile-development#ui-design#navigation-patterns
One-click install
npx skills add https://github.com/duanbiao2000/obsidianDoc26 --skill react-native-design-duanbiao2000
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-design
Source: https://github.com/duanbiao2000/obsidianDoc26/tree/main/agents-main/plugins/ui-design/skills/react-native-design
Command: npx skills add https://github.com/duanbiao2000/obsidianDoc26 --skill react-native-design-duanbiao2000

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React Native development often requires coordinating styling, navigation, and animations across platforms. This skill consolidates patterns and guidelines to streamline UI consistency and interaction design.

Core Features & Use Cases

  • Styling patterns with StyleSheet and dynamic theming for consistent UI across iOS and Android.
  • Navigation patterns with React Navigation (Stack, Tabs, Drawer) to implement common app flows.
  • Reanimated 3 basics to build performant, gesture-driven animations.
  • Platform-specific styling guidance to tailor experiences per device.

Quick Start

Create a new React Native screen and apply the styling, navigation, and animation patterns to build a responsive, 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 create consistent cross-platform styling in React Native for iOS and Android?▼

React Native cross-platform styling uses StyleSheet patterns with platform-specific adjustments to maintain consistent UI across iOS and Android. Dynamic theming guidelines and reusable styling patterns ensure scalable visual architecture without duplicating component definitions.

What is the best way to set up React Navigation with Stack, Tabs, and Drawer in a mobile app?▼

React Navigation setup involves configuring Stack, Tabs, and Drawer navigators to implement common app flows. Consolidated navigation patterns streamline routing architecture, allowing you to structure screen transitions and implement standard mobile navigation hierarchies efficiently.

How do I build performant gesture-driven animations in React Native?▼

Gesture-driven animations in React Native are built using Reanimated 3 patterns. These guidelines cover the basics of creating performant, smooth transitions and interactions directly in the UI thread, ensuring responsive gesture handling without blocking JavaScript execution.

Can I apply dynamic theming to a React Native app without external UI libraries?▼

Yes, dynamic theming can be applied using StyleSheet-based styling patterns. The approach provides reusable styling guidelines that support consistent visual updates across iOS and Android without requiring heavy external dependencies, maintaining a scalable architecture.

When do I need platform-specific styling adjustments in React Native?▼

Platform-specific styling adjustments in React Native are needed when tailoring experiences per device for iOS and Android. Implementing targeted StyleSheet modifications ensures consistent visuals and interaction design where default cross-platform behaviors diverge between operating systems.

Related Skills

Explore More Software Engineering Skills→
mwathibenmwathiben

react-native-architecture

Design React Native architectures with Expo Router and native modules.

Community
Advanced
ngxtmngxtm

Next.js State Management

Provides best practices for managing state in Next.js applications.

Community
Intermediate
anicca-labsanicca-labs

coding-standards

Enforce React Native coding standards with TypeScript, Prettier, and custom rules.

Official
Intermediate
laguagulaguagu
58

ai-elements

Provide reusable UI components for building AI-native chat interfaces and workflows.

Community
Intermediate