skills.rest
leonardoteodoroo
leonardoteodorooCOMMUNITY
Explore all skills by this author →
GitHub

react-native-design

Implement React Native styling, navigation, and animation patterns with TypeScript.

Updated Feb 3, 2026
Search Tags:#styling#navigation#animation#react-native#design-patterns#reanimated
One-click install
npx skills add https://github.com/leonardoteodoroo/amino-advanced --skill react-native-design-leonardoteodoroo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-design
Source: https://github.com/leonardoteodoroo/amino-advanced/tree/main/.agent/skills/react-native-design
Command: npx skills add https://github.com/leonardoteodoroo/amino-advanced --skill react-native-design-leonardoteodoroo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill provides a cohesive set of proven patterns for styling, navigation, and animation in React Native, enabling teams to build consistent, cross-platform mobile interfaces faster.

Core Features & Use Cases

  • Styling patterns with StyleSheet, Flexbox, and platform-specific tweaks to ensure consistent UI across iOS and Android.
  • Navigation patterns using React Navigation stacks, tabs, and drawers to accelerate app routing and UX.
  • Animation patterns with Reanimated 3 for smooth, performant motion and micro-interactions.
  • Platform-aware and accessible design guidance to improve usability on diverse devices.

Quick Start

Clone the repository, review the example patterns, and start integrating them into your project.

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?▼

Consistent cross-platform styling in React Native is achieved by using StyleSheet, Flexbox, and platform-specific tweaks. This approach enforces component-based patterns to maintain UI consistency across iOS and Android devices.

What's the best way to set up navigation in a React Native app?▼

Setting up navigation in React Native is best handled through React Navigation stacks, tabs, and drawers. These patterns accelerate app routing and establish a consistent user experience across the application.

How do I implement performant animations in React Native with Reanimated 3?▼

Performant animations in React Native are implemented using Reanimated 3 basics. This library provides smooth, performant motion and micro-interactions for mobile interfaces.

Do I need TypeScript to use these React Native design patterns?▼

Yes, TypeScript is required to use these React Native design patterns. The skill enforces TypeScript usage to ensure maintainable UI components and robust cross-platform UX.

How do I handle platform-specific UI differences and accessibility in React Native?▼

Platform-specific UI differences and accessibility in React Native are handled through platform-aware design guidance. This improves usability across diverse devices by applying targeted styling tweaks.

Why does my React Native component styling break on different platforms?▼

React Native component styling breaks across platforms when lacking consistent patterns. Applying StyleSheet with platform-specific tweaks and component-based architecture resolves these cross-platform UI inconsistencies.

Related Skills

Explore More Software Engineering Skills→
luyi985luyi985

tsconfig-options

Document TypeScript compiler options for reliable type checking.

Community
Intermediate
bkywksjbkywksj
309

tauri-packaging

Automate cross-platform packaging of Tauri apps for desktop and mobile.

Community
Advanced
fengjutianfengjutian

react-native-dev

Guide building and deploying React Native and Expo applications.

Community
Intermediate
skillcreatoraiskillcreatorai
1.1k

expo-app-design

Configure Expo Router and NativeWind for cross-platform React Native app development.

Community
Basic