React Native App Architecture

You are a senior React Native architect with extensive experience shipping production mobile applications to both iOS and Android. Design a comprehensive application architecture based on the following project parameters.

Project Details:
App Name: [APP NAME]
App Category: [SOCIAL/E-COMMERCE/FINTECH/HEALTH/PRODUCTIVITY/MEDIA]
Target Platforms: [iOS ONLY/ANDROID ONLY/BOTH]
Expected User Base: [ESTIMATED MONTHLY ACTIVE USERS]
Offline Requirements: [FULL OFFLINE/PARTIAL OFFLINE/ONLINE ONLY]
Team Size: [NUMBER OF MOBILE DEVELOPERS]

Section 1 - Project Structure and Module Organization:
Define a scalable folder structure that separates features into self-contained modules with their own screens, components, hooks, and services. Recommend whether to use a monorepo approach with tools like Nx or Turborepo for sharing code between the mobile app, web app, and backend packages. Specify the naming conventions and file organization standards that the entire team must follow. Detail how shared utilities, theme definitions, and common components should be structured to prevent duplication. Address how feature flags should be integrated at the module level to enable gradual rollouts and A/B testing.

Section 2 - State Management and Data Flow:
Recommend the state management solution and justify the choice between Redux Toolkit, Zustand, Jotai, or React Context based on the application complexity and team experience. Define the data flow architecture separating server state managed through React Query or SWR from local UI state. Design the caching strategy for API responses including cache invalidation rules and optimistic updates. Specify how global application state such as authentication tokens, user preferences, and feature flags should be managed. Address the synchronization strategy between local state and server state, particularly for offline-capable features where conflicts may arise when the device reconnects.

Section 3 - Navigation Architecture:
Design the navigation structure using React Navigation including the hierarchy of stack navigators, tab navigators, and drawer navigators. Define the deep linking scheme with universal links for iOS and app links for Android, covering all navigable screens. Specify the authentication flow navigation pattern including how the app handles expired tokens, biometric re-authentication, and onboarding completion states. Create the navigation type safety approach using TypeScript to ensure all route params are validated at compile time. Address navigation performance optimization including lazy loading screens, pre-fetching data on navigation intent, and managing navigation state persistence for app restoration.

Section 4 - Native Module Integration Strategy:
Identify which features require native module bridges and whether to use the New Architecture with Turbo Modules and Fabric or maintain backward compatibility with the bridge. Define the strategy for platform-specific code including camera access, biometric authentication, push notifications, and file system operations. Specify how to handle native dependency management across both platforms using CocoaPods for iOS and Gradle for Android. Create guidelines for evaluating third-party native libraries including maintenance status, New Architecture compatibility, and performance characteristics. Address the approach for features that need significantly different implementations per platform such as widgets, background tasks, and system integrations.

Section 5 - Performance and Optimization:
Define the performance budget including app launch time targets, frame rate minimums, and memory usage limits for both platforms. Specify the bundle optimization strategy including code splitting, tree shaking, Hermes engine configuration, and asset optimization. Design the image loading and caching pipeline using a library like FastImage with placeholder strategies and progressive loading. Create guidelines for avoiding common React Native performance pitfalls including unnecessary re-renders, bridge traffic reduction, and large list optimization with FlashList. Address the monitoring strategy for tracking performance metrics in production using tools like Flipper, React Native Performance, or custom telemetry.

Section 6 - Build, Testing, and Release Pipeline:
Define the CI/CD pipeline using tools like Fastlane, EAS Build, or App Center for automated builds, testing, and distribution. Specify the testing strategy including unit tests with Jest, component tests with React Native Testing Library, and end-to-end tests with Detox or Maestro. Design the environment management system for development, staging, and production configurations including API endpoints, feature flags, and analytics keys. Create the over-the-air update strategy using CodePush or EAS Updates for delivering JavaScript bundle updates without app store review. Address the release management process including version numbering, release notes generation, staged rollouts, and rollback procedures for both platforms.