react-native-architecture by wshobson

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

2. Expo vs Bare React Native

Feature	Expo	Bare RN
Setup complexity	Low	High
Native modules	EAS Build	Manual linking
OTA updates	Built-in	Manual setup
Build service	EAS	Custom CI
Custom native code	Config plugins	Direct access

Quick Start

# Create new Expo project
npx create-expo-app@latest my-app -t expo-template-blank-typescript

# Install essential dependencies
npx expo install expo-router expo-status-bar react-native-safe-area-context
npx expo install @react-native-async-storage/async-storage
npx expo install expo-secure-store expo-haptics

// app/_layout.tsx
import { Stack } from 'expo-router'
import { ThemeProvider } from '@/providers/ThemeProvider'
import { QueryProvider } from '@/providers/QueryProvider'

export default function RootLayout() {
  return (
    <QueryProvider>
      <ThemeProvider>
        <Stack screenOptions={{ headerShown: false }}>
          <Stack.Screen name="(tabs)" />
          <Stack.Screen name="(auth)" />
          <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
        </Stack>
      </ThemeProvider>
    </QueryProvider>
  )
}

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.

Best Practices

Do's

Use Expo - Faster development, OTA updates, managed native code
FlashList over FlatList - Better performance for long lists
Memoize components - Prevent unnecessary re-renders
Use Reanimated - 60fps animations on native thread
Test on real devices - Simulators miss real-world issues

Don'ts

Don't inline styles - Use StyleSheet.create for performance
Don't fetch in render - Use useEffect or React Query
Don't ignore platform differences - Test on both iOS and Android
Don't store secrets in code - Use environment variables
Don't skip error boundaries - Mobile crashes are unforgiving

Third-party checks

No alerts15d5 checks · Risk SAFE

Gen Agent Trust Hub17d
The skill provides standard architectural patterns and best practices for React Native and Expo development. It includes security-conscious recommendations such as using secure storage for tokens and avoiding hardcoded secrets.
Socket15d
No alerts
Snyk17d
Risk: LOW · No issues
Runlayer6mo
1 file scanned · No issues
ZeroLeaks5mo
Score: 93/100 · 2 sections analyzed

What it does

Builds production React Native apps with Expo, covering navigation, state management, native modules, offline-first architecture, and cross-platform patterns. Use when starting an Expo project, implementing complex navigation, integrating native APIs, or setting up CI/CD for mobile releases.

Generated from the current SKILL.md.

Frequently asked

Does this skill cover Expo Router navigation?

Yes. The skill includes patterns for Expo Router setup, screen groups, modal presentation, and layout configuration as core navigation concepts.

What state management does this recommend?

The skill shows React Query (via QueryProvider) and mentions custom hooks and stores, but does not prescribe a specific state library.

Does this cover native module integration?

Yes. The skill includes patterns for integrating native modules and platform APIs, with guidance on using EAS Build for Expo projects and config plugins for custom native code.

Does this skill address offline-first architecture?

Yes. Offline-first mobile applications are listed as a core use case, and the skill includes AsyncStorage and local storage patterns for offline sync.

Should I use this for bare React Native or Expo?

This skill is built around Expo and EAS. It includes a comparison table showing Expo's advantages, but does not provide patterns for bare React Native projects.

Generated from the current SKILL.md. These answers refresh after source changes.

/react-native-architecture

SKILL.md