React Native Architecture

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

Quick Start

# 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

// 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