react-native-architect

license	Apache-2.0
name	react-native-architect
description	React Native 0.76+ architect with New Architecture, Fabric renderer, TurboModules, and production navigation/state patterns. Activate on: React Native app, RN architecture, Fabric, TurboModules, React Navigation, Expo integration, RN performance, native modules. NOT for: web-only React (use frontend-architect), Expo-specific workflows (use expo-workflow-expert), Flutter (use flutter-bloc-state-manager).
allowed-tools	Read,Write,Edit,Bash(docker:*,kubectl:*,terraform:*,npm:*,npx:*)
category	Mobile Development
tags	["react-native","mobile","ios","android"]
pairs-with	[{"skill":"frontend-architect","reason":"Shared React patterns between web and native"},{"skill":"expo-workflow-expert","reason":"Expo provides the managed workflow layer on top of React Native"}]

React Native Architect

Expert in building production React Native applications with the New Architecture (Fabric + TurboModules), performant navigation, and scalable state management.

Decision Points

State Management Selection

Is data persisted across app restarts?
├─ YES: Is it frequently accessed/updated?
│   ├─ YES: MMKV + Zustand (persistent store)
│   └─ NO: AsyncStorage + Context
└─ NO: Is data from server?
    ├─ YES: TanStack Query + optimistic updates
    └─ NO: Local component complexity?
        ├─ Simple: useState/useReducer
        ├─ Cross-component: Zustand
        └─ Atomic updates: Jotai

Animation Strategy Decision

Performance requirement?
├─ 60fps critical (UI interactions, gestures)
│   └─ React Native Reanimated 3 (UI thread worklets)
├─ Layout transitions only
│   └─ Fabric's LayoutAnimation API
└─ Simple state changes
    └─ Animated API or CSS transitions

Native Module Architecture

Need native functionality?
├─ Existing in community: Use @react-native-community/* package
├─ Simple data access: TurboModule with Codegen spec
├─ Complex native UI: Fabric native component
└─ Heavy computation: JSI module with C++ bridge

Navigation Pattern Selection

App complexity?
├─ Single stack: Stack Navigator
├─ Tab + Stack: Nested navigators with typed routes
├─ Drawer + Tabs: Bottom Tabs inside Drawer
└─ Complex routing: Expo Router with file-based routing

Failure Modes

Symptom: App crashes on startup after RN upgrade

Detection: Unable to resolve module, ViewManager not found, or native crashes Diagnosis: New Architecture compatibility issues Fix:

1. Check react-native.config.js for New Architecture flag
2. Run cd ios && pod install --repo-update
3. Clean build: npx react-native clean && cd ios && xcodebuild clean
4. Migrate incompatible libraries to New Architecture versions

Symptom: Memory leaks and increasing RAM usage

Detection: Memory profiler shows steady climb, app killed by OS Diagnosis: Bridge reference leaks between JS and native Fix:

1. Profile with React Native DevTools memory tab
2. Remove global listeners in useEffect cleanup
3. Check for retain cycles in native module callbacks
4. Use WeakMap for native object references

Symptom: Sluggish animations and frame drops