React Native Architecture

by wshobson46891e7e60daNo licenseListed Oct 8, 2026Updated Oct 8, 2026

Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.

Instructions onlySoftware Development

AI-generated overview

Guides production React Native and Expo app architecture, covering navigation, native modules, offline sync and cross-platform patterns.

What it does: This skill provides architectural guidance for building production React Native apps with Expo. It covers project structure, Expo versus bare React Native trade-offs, navigation setup with Expo Router, state management, native module integration, offline-first patterns and performance practices. It also points to a reference file with more detailed patterns and worked examples.
When to use it: Use it when starting a new React Native or Expo project, designing navigation or state management, integrating native modules and platform APIs, or building offline-first mobile apps. It is also relevant when optimizing React Native performance or planning mobile release pipelines.
Requirements: No scripts are shipped; it is instructions only. It assumes a React Native or Expo development environment with Node.js and npm/npx, and references a bundled reference document for deeper patterns.

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

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

Quick Start

bash

# Create new Expo projectnpx create-expo-app@latest my-app -t expo-template-blank-typescript
# Install essential dependenciesnpx expo install expo-router expo-status-bar react-native-safe-area-contextnpx expo install @react-native-async-storage/async-storagenpx expo install expo-secure-store expo-haptics

# Create new Expo projectnpx create-expo-app@latest my-app -t expo-template-blank-typescript
# Install essential dependenciesnpx expo install expo-router expo-status-bar react-native-safe-area-contextnpx expo install @react-native-async-storage/async-storagenpx expo install expo-secure-store expo-haptics

typescript

// app/_layout.tsximport { 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>  )}

// app/_layout.tsximport { 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

Source and attribution

Source:wshobson/agentsinplugins/frontend-mobile-development/skills/react-native-architectureat commit46891e7

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

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

React Native Architecture

React Native Architecture

When to Use This Skill

Core Concepts

1. Project Structure

2. Expo vs Bare React Native

Quick Start

Detailed patterns and worked examples

Best Practices

Do's

Don'ts

Source and attribution

More from wshobson/agents

Uv Package Manager

Web Component Design

Python Type Safety

Visual Design Foundations

Responsive Design

Python Resource Management

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Dpop Adoption

Gemini Live Api

Gemini Api