git:20260307.47a5dbc to git:20260522.be57c0b

2 added, 566 removed. Audit A to A.

---

name: react-native-architecture

description: 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.

---

# 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

```bash

# 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

```

```typescript

// app/_layout.tsx

import { Stack } from 'expo-router'

import { ThemeProvider } from '@/providers/ThemeProvider'

import { QueryProvider } from '@/providers/QueryProvider'

export default function RootLayout() {

return (

<Stack.Screen name="(tabs)" />

<Stack.Screen name="(auth)" />

<Stack.Screen name="modal" options={{ presentation: 'modal' }} />

</Stack>

</ThemeProvider>

</QueryProvider>

)

}

```

- ## Patterns

- ### Pattern 1: Expo Router Navigation

- ```typescript

- // app/(tabs)/_layout.tsx

- import { Tabs } from 'expo-router'

- import { Home, Search, User, Settings } from 'lucide-react-native'

- import { useTheme } from '@/hooks/useTheme'

- export default function TabLayout() {

- const { colors } = useTheme()

- return (

- <Tabs

- screenOptions={{

- tabBarActiveTintColor: colors.primary,

- tabBarInactiveTintColor: colors.textMuted,

- tabBarStyle: { backgroundColor: colors.background },

- headerShown: false,

- }}

- >

- <Tabs.Screen

- name="index"

- options={{

- title: 'Home',

- tabBarIcon: ({ color, size }) => <Home size={size} color={color} />,

- }}

- />

- <Tabs.Screen

- name="search"

- options={{

- title: 'Search',

- tabBarIcon: ({ color, size }) => <Search size={size} color={color} />,

- }}

- />

- <Tabs.Screen

- name="profile"

- options={{

- title: 'Profile',

- tabBarIcon: ({ color, size }) => <User size={size} color={color} />,

- }}

- />

- <Tabs.Screen

- name="settings"

- options={{

- title: 'Settings',

- tabBarIcon: ({ color, size }) => <Settings size={size} color={color} />,

- }}

- />

- </Tabs>

- )

- }

- // app/(tabs)/profile/[id].tsx - Dynamic route

- import { useLocalSearchParams } from 'expo-router'

- export default function ProfileScreen() {

- const { id } = useLocalSearchParams<{ id: string }>()

- return <UserProfile userId={id} />

- }

- // Navigation from anywhere

- import { router } from 'expo-router'

- // Programmatic navigation

- router.push('/profile/123')

- router.replace('/login')

- router.back()

- // With params

- router.push({

- pathname: '/product/[id]',

- params: { id: '123', referrer: 'home' },

- })

- ```

- ### Pattern 2: Authentication Flow

- ```typescript

- // providers/AuthProvider.tsx

- import { createContext, useContext, useEffect, useState } from 'react'

- import { useRouter, useSegments } from 'expo-router'

- import * as SecureStore from 'expo-secure-store'

- interface AuthContextType {

- user: User | null

- isLoading: boolean

- signIn: (credentials: Credentials) => Promise<void>

- signOut: () => Promise<void>

- }

- const AuthContext = createContext<AuthContextType | null>(null)

- export function AuthProvider({ children }: { children: React.ReactNode }) {

- const [user, setUser] = useState<User | null>(null)

- const [isLoading, setIsLoading] = useState(true)

- const segments = useSegments()

- const router = useRouter()

- // Check authentication on mount

- useEffect(() => {

- checkAuth()

- }, [])

- // Protect routes

- useEffect(() => {

- if (isLoading) return

- const inAuthGroup = segments[0] === '(auth)'

- if (!user && !inAuthGroup) {

- router.replace('/login')

- } else if (user && inAuthGroup) {

- router.replace('/(tabs)')

- }

- }, [user, segments, isLoading])

- async function checkAuth() {

- try {

- const token = await SecureStore.getItemAsync('authToken')

- if (token) {

- const userData = await api.getUser(token)

- setUser(userData)

- }

- } catch (error) {

- await SecureStore.deleteItemAsync('authToken')

- } finally {

- setIsLoading(false)

- }

- async function signIn(credentials: Credentials) {

- const { token, user } = await api.login(credentials)

- await SecureStore.setItemAsync('authToken', token)

- setUser(user)

- }

- async function signOut() {

- await SecureStore.deleteItemAsync('authToken')

- setUser(null)

- }

- if (isLoading) {

- return <SplashScreen />

- }

- return (

- <AuthContext.Provider value={{ user, isLoading, signIn, signOut }}>

- {children}

- </AuthContext.Provider>

- )

- }

- export const useAuth = () => {

- const context = useContext(AuthContext)

- if (!context) throw new Error('useAuth must be used within AuthProvider')

- return context

- }

- ```

- ### Pattern 3: Offline-First with React Query

- ```typescript

- // providers/QueryProvider.tsx

- import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

- import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'

- import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'

- import AsyncStorage from '@react-native-async-storage/async-storage'

- import NetInfo from '@react-native-community/netinfo'

- import { onlineManager } from '@tanstack/react-query'

- // Sync online status

- onlineManager.setEventListener((setOnline) => {

- return NetInfo.addEventListener((state) => {

- setOnline(!!state.isConnected)

- })

- const queryClient = new QueryClient({

- defaultOptions: {

- queries: {

- gcTime: 1000 * 60 * 60 * 24, // 24 hours

- staleTime: 1000 * 60 * 5, // 5 minutes

- retry: 2,

- networkMode: 'offlineFirst',

- },

- mutations: {

- networkMode: 'offlineFirst',

- },

- })

- const asyncStoragePersister = createAsyncStoragePersister({

- storage: AsyncStorage,

- key: 'REACT_QUERY_OFFLINE_CACHE',

- })

- export function QueryProvider({ children }: { children: React.ReactNode }) {

- return (

- <PersistQueryClientProvider

- client={queryClient}

- persistOptions={{ persister: asyncStoragePersister }}

- >

- {children}

- </PersistQueryClientProvider>

- )

- }

- // hooks/useProducts.ts

- import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'

- export function useProducts() {

- return useQuery({

- queryKey: ['products'],

- queryFn: api.getProducts,

- // Use stale data while revalidating

- placeholderData: (previousData) => previousData,

- })

- }

- export function useCreateProduct() {

- const queryClient = useQueryClient()

- return useMutation({

- mutationFn: api.createProduct,

- // Optimistic update

- onMutate: async (newProduct) => {

- await queryClient.cancelQueries({ queryKey: ['products'] })

- const previous = queryClient.getQueryData(['products'])

- queryClient.setQueryData(['products'], (old: Product[]) => [

- ...old,

- { ...newProduct, id: 'temp-' + Date.now() },

- ])

- return { previous }

- },

- onError: (err, newProduct, context) => {

- queryClient.setQueryData(['products'], context?.previous)

- },

- onSettled: () => {

- queryClient.invalidateQueries({ queryKey: ['products'] })

- },

- })

- }

- ```

- ### Pattern 4: Native Module Integration

- ```typescript

- // services/haptics.ts

- import * as Haptics from "expo-haptics";

- import { Platform } from "react-native";

- export const haptics = {

- light: () => {