skills.rest
karthiknish
karthiknishCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-native-design

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

2|1|Updated May 23, 2025
Search Tags:#performance#styling#animations#react-native#react-navigation#reanimated#gesture-handler
One-click install
npx skills add https://github.com/karthiknish/aroosi --skill react-native-design-karthiknish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-design
Source: https://github.com/karthiknish/aroosi/tree/main/apps/mobile/.agents/skills/react-native-design
Command: npx skills add https://github.com/karthiknish/aroosi --skill react-native-design-karthiknish

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building cross-platform mobile interfaces that feel native is complex and error-prone; this Skill consolidates proven styling patterns, navigation setups, gesture integrations, and Reanimated animation techniques to reduce implementation time and avoid common performance pitfalls.

Core Features & Use Cases

  • Styling & Theming: Opinionated StyleSheet patterns, theme provider examples, responsive scaling, and cross-platform shadow/font handling to create consistent UIs.
  • Navigation Patterns: Type-safe React Navigation setups (stack, tabs, drawer), deep linking, custom headers, and navigation state persistence for robust app flows.
  • Animations & Gestures: Reanimated 3 examples (shared values, worklets, layout animations) and Gesture Handler compositions for draggable cards, swipe-to-action, bottom sheets, and staggered lists.
  • Use Case: Implement a mobile feed with shared element transitions, animated card interactions, and a responsive bottom sheet while keeping 60fps performance on real devices.

Quick Start

Create a responsive React Native screen using React Navigation, apply the theme and StyleSheet patterns, and add a Reanimated 3 draggable card with Gesture Handler using the provided patterns.

Frequently Asked Questions about react-native-design

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

FAQPage Schema
How do I build performant React Native animations without dropping frames?▼

To build performant React Native animations, use Reanimated 3 worklets and shared values to execute logic on the UI thread. This Skill provides patterns for layout animations and gesture composition to maintain 60fps performance on real devices.

What's the best way to set up type-safe React Navigation for stack, tabs, and drawer?▼

Type-safe React Navigation requires defining TypeScript-typed navigation parameters for stack, tab, and drawer routes. This Skill provides setups for deep linking, custom headers, and navigation state persistence to ensure robust app flows.

How do I create gesture-driven interactions like swipe-to-action and bottom sheets?▼

Gesture-driven interactions like swipe-to-action and bottom sheets are created using React Native Gesture Handler compositions. This Skill provides patterns for combining gestures with Reanimated 3 shared values for draggable cards and staggered lists.

How do I implement shared element transitions in a React Native feed?▼

Shared element transitions in a React Native feed are implemented using Reanimated 3 layout animations. This Skill provides patterns to animate shared elements across navigated screens while keeping 60fps performance.

Does this Skill provide patterns for responsive layouts and cross-platform styling?▼

Yes, this Skill provides opinionated StyleSheet patterns, theme provider examples, and responsive scaling for cross-platform UIs. It includes platform-specific styling for shadows and fonts to create consistent interfaces.

Why does my React Native UI feel janky during heavy animations and gestures?▼

React Native UI feels janky during heavy animations if logic runs on the JavaScript thread instead of the UI thread. This Skill provides Reanimated 3 worklet patterns and performance best practices to avoid common pitfalls and ensure smooth interactions.

Related Skills

Explore More Software Engineering Skills→
mrodrigues1mrodrigues1

react-native-design

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

Community
Intermediate
hendrax5hendrax5

phase-6-ui-integration

Implement frontend UI and integrate it with backend APIs.

Community
Intermediate
ekremmkasapekremmkasap

react-native-design

Design React Native UI patterns for styling, navigation, and animation.

Community
Advanced
skillcreatoraiskillcreatorai
1.1k

expo-app-design

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

Community
Basic