react-native-patterns

Standardize React Native project patterns for Expo apps using Expo Router v4, NativeWind, and Maestro E2E testing.

1|Updated Mar 15, 2026
One-click install
npx skills add https://github.com/paulingham/.claude --skill react-native-patterns-paulingham
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-patterns
Source: https://github.com/paulingham/.claude/tree/main/skills/react-native-patterns
Command: npx skills add https://github.com/paulingham/.claude --skill react-native-patterns-paulingham

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React Native projects often drift in structure and approach; this guide documents and enforces consistent patterns across Expo Router v4, NativeWind styling, Gluestack UI components, and Maestro E2E workflows to improve maintainability and scalability.

Core Features & Use Cases

  • Expo Router v4 fundamentals: file-based routing, layout patterns, typed routes, and deep linking considerations.
  • NativeWind styling: utility-first design, platform variants, dark mode, and performance tips.
  • Gluestack UI v3 integration: accessible components, FormControl patterns, and theming compatibility.
  • State management guidance: TanStack Query for server state and Zustand for UI state with best practices.
  • Maestro E2E testing: directory conventions and YAML-based flows for end-to-end validation.
  • Platform handling and performance: platform-specific code paths, careful rendering and memoization strategies.

Quick Start

Use the React Native patterns guide to structure your app with Expo Router v4, NativeWind, and Gluestack UI while adopting Maestro E2E testing workflows.

Frequently Asked Questions about react-native-patterns

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

FAQPage Schema
How do I standardize React Native project patterns to prevent architecture drift?

You can prevent architecture drift by enforcing consistent code shape constraints and architecture decomposition patterns across Expo-based mobile apps, which keeps iOS and Android implementations structurally unified and maintainable.

What's the best way to structure Expo Router v4 layouts and typed routes?

The best way to structure Expo Router v4 is by applying file-based routing conventions, standard layout patterns, and typed routes with deep linking considerations to maintain navigation consistency across your React Native app.

How do I combine NativeWind styling with Gluestack UI v3 components?

Combine NativeWind with Gluestack UI v3 by applying utility-first design variants alongside accessible components, utilizing FormControl patterns and theming compatibility to ensure consistent, accessible UI rendering.

When should I use TanStack Query vs Zustand for React Native state management?

Use TanStack Query for managing server state and Zustand for UI state in React Native, following these best practices to cleanly separate data fetching concerns from local interface logic and reduce state complexity.

How do I set up Maestro E2E testing workflows for Expo apps?

Set up Maestro E2E testing by following established directory conventions and writing YAML-based flows to validate end-to-end user interactions across iOS and Android platforms within your Expo application.

Does this React Native patterns guide support platform-specific code paths and dark mode?

Yes, the guide supports platform-specific code paths and dark mode by enforcing careful rendering and memoization strategies alongside NativeWind platform variants, ensuring optimal performance and platform-appropriate UI.