react-native-architecture

Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture.

24,269 stars

Best use case

react-native-architecture is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture.

Teams using react-native-architecture should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/react-native-architecture/SKILL.md --create-dirs "https://raw.githubusercontent.com/davila7/claude-code-templates/main/cli-tool/components/skills/web-development/react-native-architecture/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/react-native-architecture/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How react-native-architecture Compares

Feature / Agentreact-native-architectureStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

Related Guides

SKILL.md Source

# React Native Architecture

Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture.

## Use this skill when

- Starting a new React Native or Expo project
- Implementing complex navigation patterns
- Integrating native modules and platform APIs
- Building offline-first mobile applications
- Optimizing React Native performance
- Setting up CI/CD for mobile releases

## Do not use this skill when

- The task is unrelated to react native architecture
- You need a different domain or tool outside this scope

## Instructions

- Clarify goals, constraints, and required inputs.
- Apply relevant best practices and validate outcomes.
- Provide actionable steps and verification.
- If detailed examples are required, open `resources/implementation-playbook.md`.

## Resources

- `resources/implementation-playbook.md` for detailed patterns and examples.

Related Skills

react-state-management

24269
from davila7/claude-code-templates

Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.

react-component-performance

24269
from davila7/claude-code-templates

Diagnose slow React components and suggest targeted performance fixes.

architecture-patterns

24269
from davila7/claude-code-templates

Master proven backend architecture patterns including Clean Architecture, Hexagonal Architecture, and Domain-Driven Design to build maintainable, testable, and scalable systems.

architecture-decision-records

24269
from davila7/claude-code-templates

Comprehensive patterns for creating, maintaining, and managing Architecture Decision Records (ADRs) that capture the context and rationale behind significant technical decisions.

reactome-database

24269
from davila7/claude-code-templates

Query Reactome REST API for pathway analysis, enrichment, gene-pathway mapping, disease pathways, molecular interactions, expression analysis, for systems biology studies.

software-architecture

24269
from davila7/claude-code-templates

Guide for quality focused software architecture. This skill should be used when users want to write code, design architecture, analyze code, in any case that relates to software development.

react-useeffect

24269
from davila7/claude-code-templates

React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.

react-ui-patterns

24269
from davila7/claude-code-templates

Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.

react-patterns

24269
from davila7/claude-code-templates

Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

react-dev

24269
from davila7/claude-code-templates

This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router, React Router).

vercel-react-best-practices

24269
from davila7/claude-code-templates

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

architecture

24269
from davila7/claude-code-templates

Architectural decision-making framework. Requirements analysis, trade-off evaluation, ADR documentation. Use when making architecture decisions or analyzing system design.