React Native Architecture

From the author

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.

— the description by Seth Hobson

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to React Native development using the Expo ecosystem. It covers project organization, navigation patterns, authentication flows, and essential development practices to help developers build and maintain mobile applications.

What it does

Defines standard project directory structures for React Native apps
Provides patterns for implementing navigation using Expo Router
Outlines authentication flow implementation with secure storage
Offers best practices for component styling and performance
Compares Expo and bare React Native development workflows

When to use it

When starting a new React Native or Expo project
When implementing complex navigation or authentication flows
When determining the appropriate project setup between Expo and bare React Native
When seeking guidance on mobile-specific development patterns

Advantages

Promotes consistent project structure
Provides clear patterns for common mobile app requirements
Offers actionable advice on platform-specific development
Includes ready-to-use code patterns for navigation and auth

Usage examples

“How should I structure my React Native project files?”: The skill provides a recommended directory structure including folders for app screens, components, hooks, services, and stores.
“How do I implement an authentication flow in Expo?”: The skill provides a pattern using an AuthProvider and Expo Router to protect routes and manage user sessions.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/wshobson/react-native-architecture/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip react-native-architecture.zip -d .agents/skills

Documentation by Seth Hobson

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

Files

ATTRIBUTION.mdAdded by AutoGineer1.0 KiB
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md3.5 KiB
references/details.md13.4 KiB

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Frontend Mobile Development Mobile Developer
Seth Hobson· Community
An expert mobile developer persona for building and optimizing cross-platform and native applications.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k
Multi Platform Apps Mobile Developer
Seth Hobson· Community
An expert mobile developer persona for building and optimizing React Native, Flutter, and native iOS or Android applications.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k
iOS Developer
Seth Hobson· Community
An expert iOS developer persona specializing in native Swift, SwiftUI, and the Apple ecosystem.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k
Contact Center Android
AnthropicOfficial
Official integration guide for the Zoom Contact Center SDK on Android.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository35.1k
Zoom Video SDK Flutter
AnthropicOfficial
Integrate the Zoom Video SDK into Flutter applications to build custom real-time video session experiences.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository35.1k
Zoom Meeting SDK Android
AnthropicOfficial
Integrate Zoom meeting capabilities into native Android applications using the Zoom Meeting SDK.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository35.1k

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download react-native-architecture.zip