React Native Architecture

Built for teams shipping React Native apps to production, this covers the architectural decisions that matter: Expo Router for file-based navigation, offline-first patterns with React Query persistence, proper auth flows with route protection, and cross-platform native module integration. It walks through project structure, state management, and CI/CD setup with EAS Build. The code examples show real patterns like dynamic routing, secure token storage, and network-aware caching that you'll actually use in production apps, not just toy demos.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 9
skills.sh installs: 15.6K
GitHub stars: 42.4K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add wshobson/agents --skill react-native-architecture --agent claude-code

Installs into .claude/skills of the current project.

Files

React Native Architecture

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

When to Use This Skill

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

Core Concepts

1. Project Structure

src/
├── app/                    # Expo Router screens
│   ├── (auth)/            # Auth group
│   ├── (tabs)/            # Tab navigation
│   └── _layout.tsx        # Root layout
├── components/
│   ├── ui/                # Reusable UI components
│   └── features/          # Feature-specific components
├── hooks/                 # Custom hooks
├── services/              # API and native services
├── stores/                # State management
├── utils/                 # Utilities
└── types/                 # TypeScript types