mobile-component-patterns

What problem does it solve?

Developers often struggle to create consistent, maintainable, and testable UI building blocks in React Native apps; this Skill provides patterns and guidance to turn ad-hoc components into reusable, well-typed primitives and composable compound components.

Core Features & Use Cases

• Typed component templates: examples and patterns for TypeScript props and prop interfaces to improve DX and correctness.
• Styling options: recommended approaches using StyleSheet for static styles and NativeWind for utility-driven styles with guidance on when to choose each.
• Component architecture: clear separation of screens vs components, compound component patterns (e.g., Card with Header/Body/Footer), and layout organization.
• Reusable logic: examples for extracting behavior into custom hooks to keep components presentational.
• Testing guidance: patterns and sample tests using React Native Testing Library to validate render and interaction behavior.
• Scaffolding: instructions for quickly generating components and tests via MCP tools.

Quick Start

Create a reusable Card component with header, body, and optional footer using the compound component pattern and include a React Native Testing Library test.