skills.rest
theodrosyimer
theodrosyimerCOMMUNITY
Explore all skills by this author →
GitHub

rn-patterns

Generate React Native UI screens using Uniwind and Expo components.

1|Updated Jan 13, 2023
Search Tags:#layout#animation#react-native#keyboard#expo#ui-patterns#uniwind
One-click install
npx skills add https://github.com/theodrosyimer/.dotfiles --skill rn-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rn-patterns
Source: https://github.com/theodrosyimer/.dotfiles/tree/main/claude/skills/ds__rn-patterns
Command: npx skills add https://github.com/theodrosyimer/.dotfiles --skill rn-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It eliminates the need to repeatedly design and code common mobile UI structures, ensuring consistent styling, accessibility, and performance across React Native projects.

Core Features & Use Cases

  • Unified Styling: Central token‑based theming via Uniwind for surfaces, content, and actions.
  • Native Integrations: Seamless use of @expo/ui SwiftUI and Jetpack Compose components for iOS and Android.
  • Advanced Interactions: Keyboard handling, state‑driven EaseView animations, and gesture‑based Reanimated patterns.
  • Ready‑to‑Use Templates: Prefabricated screens, settings, lists, chat, modals, and more.

Quick Start

Use the rn-patterns skill to generate a settings screen with native iOS and Android components.

Frequently Asked Questions about rn-patterns

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

FAQPage Schema
How do I generate consistent React Native UI screens with Expo?▼

Generate React Native UI screens using Uniwind and Expo components by applying token-based theming for surfaces, content, and actions to ensure consistent styling across iOS and Android.

What is the best way to handle keyboard interactions in React Native?▼

Handle keyboard interactions in React Native using state-driven EaseView animations and gesture-based Reanimated patterns to create advanced mobile interactions.

Can I use Expo UI components for native iOS and Android integrations?▼

Yes, Expo UI components support native integrations by seamlessly using SwiftUI for iOS and Jetpack Compose for Android within your React Native project.

How do I create a React Native settings screen with native components?▼

Create a React Native settings screen by utilizing prefabricated templates that integrate Expo UI and Uniwind components for consistent cross-platform mobile layouts.

Does Uniwind support token naming conventions for React Native theming?▼

Yes, Uniwind supports central token-based theming by enforcing token naming conventions for surfaces, content, and actions to maintain unified styling across mobile app projects.

What are the limitations of using Expo UI components for mobile app development?▼

Expo UI components require adherence to token naming conventions and depend on React Native, Uniwind, and Expo UI libraries, restricting use to projects within that specific stack.

Related Skills

Explore More Software Engineering Skills→
beemanbeeman
12

heroui-native

Integrate HeroUI Native components into React Native apps with Uniwind theming.

Community
Intermediate
truongnattruongnat

react-native-design

A data-driven approach to evaluating LLMs.

Community
Advanced
zinohomezinohome
1

framer-motion-animator

Generate Framer Motion animations for React web applications.

Community
Intermediate
spencerpaulyspencerpauly
672

react-native-patterns

Creates React Native and Expo apps with navigation, styling, and platform-specific code optimizations.

Community
Intermediate