> ## Documentation Index > Fetch the complete documentation index at: https://resources.devweekends.com/llms.txt > Use this file to discover all available pages before exploring further. # React Native Enterprise Mastery > The complete guide to building production-ready, enterprise-grade mobile applications with React Native React Native Enterprise Mastery ## Welcome to React Native Enterprise Mastery This is the **most comprehensive React Native course** available—designed to transform you from a beginner into a senior mobile engineer capable of building and shipping enterprise-grade applications. With **51 in-depth modules**, real-world projects, and battle-tested patterns used by companies like Meta, Shopify, and Discord, you'll master everything needed to build professional iOS and Android apps. From fundamentals to advanced enterprise patterns Deep-dive tutorials with hands-on exercises Build production-ready applications Scalable architecture used by top companies 200+ interview questions with detailed answers Stay current with React Native evolution *** ## Who Is This Course For? Web developers ready to build native mobile apps with their existing React skills Native iOS/Android developers exploring cross-platform solutions Engineers expanding their skillset to include mobile development Leaders evaluating React Native for their teams and projects Founders building MVPs that need to ship fast on both platforms Developers transitioning into mobile development *** ## What You'll Master Core components, styling, navigation, and the React Native ecosystem Type-safe development with advanced TypeScript patterns Context API, Redux Toolkit, Zustand, and React Query Camera, GPS, notifications, biometrics, and device APIs Build 60 FPS apps with proper optimization techniques Unit, integration, and E2E testing with Jest and Detox Secure storage, authentication, and data protection Automated pipelines and App Store deployment Scalable patterns for large-scale applications Fabric, TurboModules, and JSI for maximum performance *** ## Course Curriculum ### Part 1: Foundations (Modules 1-7) Understanding React Native's architecture and how it bridges JavaScript to native code **Topics:** * What is React Native and why use it * React Native vs Native vs Flutter vs Ionic * The JavaScript-to-Native bridge * New Architecture: Fabric, TurboModules, JSI * Hermes JavaScript engine * When to choose React Native Complete development environment setup for iOS and Android **Topics:** * Node.js and package managers * Expo vs React Native CLI * iOS setup (Xcode, CocoaPods, simulators) * Android setup (Android Studio, SDK, emulators) * VS Code configuration and extensions * Debugging tools setup Organizing your codebase for scalability and maintainability **Topics:** * Feature-based folder structure * Barrel exports and module organization * Configuration management * Environment variables * Path aliases and absolute imports * Monorepo considerations Type-safe React Native development with TypeScript **Topics:** * TypeScript configuration for React Native * Typing components and props * Navigation type safety * API response typing * Generic components * Advanced TypeScript patterns Mastering View, Text, Image, TextInput, and essential components **Topics:** * View and SafeAreaView * Text and typography * Image optimization and caching * TextInput and keyboard handling * Pressable and touch handling * Platform-specific components Creating beautiful, consistent UIs with theming systems **Topics:** * StyleSheet API deep dive * Dynamic styling patterns * Dark mode implementation * Theme providers and context * Styled-components and Tamagui * Design tokens Complete guide to Flexbox layout in React Native **Topics:** * Flexbox fundamentals * Main axis vs cross axis * Flex grow, shrink, and basis * Absolute and relative positioning * Responsive layouts * Common layout patterns *** ### Part 2: Navigation & State (Modules 8-12) Building multi-screen apps with React Navigation and Expo Router **Topics:** * React Navigation setup * Stack Navigator * Tab Navigator * Drawer Navigator * Expo Router file-based routing * Navigation options and headers Complex navigation patterns and deep linking **Topics:** * Nested navigators * Authentication flows * Deep linking and universal links * Navigation state persistence * Custom navigators * Modal and overlay patterns Local and global state management patterns **Topics:** * useState and useReducer * Context API patterns * State lifting and prop drilling * When to use global state * State persistence * State machine patterns Production-ready global state management **Topics:** * Redux Toolkit setup * Slices and reducers * RTK Query for data fetching * Zustand for lightweight state * Jotai and Recoil alternatives * State persistence with MMKV High-performance lists with FlatList and FlashList **Topics:** * FlatList optimization * SectionList for grouped data * FlashList for maximum performance * Pull-to-refresh * Infinite scrolling * List item optimization *** ### Part 3: Data & Networking (Modules 13-17) Building robust forms with validation **Topics:** * React Hook Form integration * Zod and Yup validation * Custom input components * Form state management * Multi-step forms * File uploads HTTP requests, error handling, and API integration **Topics:** * Fetch API and Axios * Request/response interceptors * Error handling patterns * Retry logic * Request cancellation * API client architecture Server state management with TanStack Query **Topics:** * React Query setup * Queries and mutations * Caching strategies * Optimistic updates * Infinite queries * Prefetching and background refetch Persisting data locally with various storage solutions **Topics:** * AsyncStorage basics * MMKV for high-performance storage * SQLite with Expo * WatermelonDB for complex data * Realm database * Data migration strategies Implementing secure authentication flows **Topics:** * JWT authentication * OAuth and social login * Biometric authentication * Token refresh strategies * Secure token storage * Session management *** ### Part 4: Native Features (Modules 18-21) Accessing device features and native APIs **Topics:** * Expo modules overview * Device information * Clipboard and sharing * Haptic feedback * App state and lifecycle * Linking and deep links Working with camera, photos, and media **Topics:** * Expo Camera * Image picker * Video recording * Image manipulation * Media library access * Audio recording and playback Implementing maps and location-based features **Topics:** * React Native Maps * Expo Location * Geofencing * Background location * Geocoding * Custom map markers Local and remote push notifications **Topics:** * Expo Notifications * Firebase Cloud Messaging * Local notifications * Notification channels * Rich notifications * Background handling *** ### Part 5: Animations & Performance (Modules 22-26) Creating smooth animations with the Animated API **Topics:** * Animated API basics * Timing and spring animations * Interpolation * Combining animations * Layout animations * Performance considerations High-performance animations with Reanimated 3 **Topics:** * Reanimated 3 setup * Worklets and shared values * Gesture Handler integration * Pan, pinch, and rotation gestures * Animated styles * Complex gesture interactions Building 60 FPS apps with optimization techniques **Topics:** * JS thread vs UI thread * Memoization strategies * Image optimization * Bundle size reduction * Hermes optimization * Lazy loading Preventing memory leaks and optimizing memory usage **Topics:** * Memory leak detection * Cleanup patterns * Image memory management * Large list optimization * Garbage collection * Memory profiling Debugging strategies and developer tools **Topics:** * React DevTools * Flipper integration * Network inspection * Performance profiling * Native debugging * Common issues and solutions *** ### Part 6: Testing (Modules 27-29) Testing components and logic with Jest **Topics:** * Jest configuration * Testing components * Mocking native modules * Snapshot testing * Testing hooks * Code coverage Testing component interactions and flows **Topics:** * React Native Testing Library * Testing navigation * Testing forms * API mocking * Testing state management * Async testing patterns End-to-end testing with Detox **Topics:** * Detox setup * Writing E2E tests * Device interactions * CI/CD integration * Test artifacts * Maestro alternative *** ### Part 7: Production Readiness (Modules 30-36) Building inclusive apps for all users **Topics:** * Accessibility props * Screen reader support * Focus management * Color contrast * Testing accessibility * WCAG compliance Securing your React Native application **Topics:** * Secure storage * Certificate pinning * Code obfuscation * Jailbreak/root detection * Data encryption * Security auditing Building apps that work without internet **Topics:** * Offline-first patterns * Network state detection * Data synchronization * Conflict resolution * Queue management * Optimistic UI WebSockets, Server-Sent Events, and real-time data **Topics:** * WebSocket implementation * Socket.io integration * Real-time state updates * Presence indicators * Live notifications * Connection management Multi-language support and localization **Topics:** * i18next setup * Translation management * RTL support * Date and number formatting * Dynamic language switching * Pluralization Performance monitoring and profiling **Topics:** * Performance profiling * Systrace and Perfetto * Custom metrics * APM integration * User experience monitoring * Performance budgets Graceful error handling and crash reporting **Topics:** * Error boundaries * Global error handling * Sentry integration * Crash reporting * Error recovery * User feedback collection *** ### Part 8: Architecture & Scaling (Modules 37-39) Scalable architecture for large applications **Topics:** * Clean architecture * Feature-based architecture * Domain-driven design * Dependency injection * SOLID principles * Architecture decision records Sharing code between mobile, web, and backend **Topics:** * Monorepo setup with Nx/Turborepo * Shared packages * React Native Web * Code sharing strategies * Build optimization * Versioning strategies Advanced Expo features and development builds **Topics:** * Expo modules * Development builds * Config plugins * Custom native code * EAS Build * Expo updates *** ### Part 9: DevOps & Deployment (Modules 40-45) Automated build and deployment pipelines **Topics:** * GitHub Actions setup * EAS Build integration * Automated testing * Code signing automation * Release management * Environment management Publishing to Apple App Store and Google Play **Topics:** * iOS build configuration * Android build configuration * App Store Connect * Google Play Console * App review guidelines * Release strategies Over-the-air updates with EAS Update and CodePush **Topics:** * EAS Update setup * CodePush integration * Update strategies * Rollback mechanisms * Version management * Update analytics User analytics and event tracking **Topics:** * Analytics architecture * Firebase Analytics * Mixpanel/Amplitude * Custom events * User properties * Privacy compliance Controlled feature rollouts **Topics:** * Feature flag architecture * LaunchDarkly integration * Remote config * Gradual rollouts * Kill switches * Experimentation Running experiments and A/B tests **Topics:** * A/B testing fundamentals * Firebase A/B Testing * Experiment design * Statistical significance * Result analysis * Iteration strategies *** ### Part 10: Advanced Topics (Modules 46-51) Building scalable design systems **Topics:** * Design system architecture * Token-based design * Component documentation * Storybook for React Native * Design-dev handoff * Maintaining consistency Popular UI libraries and when to use them **Topics:** * React Native Paper * NativeBase * Tamagui * Gluestack UI * Custom component libraries * Library selection criteria Writing native modules in Swift and Kotlin **Topics:** * Native module architecture * iOS native modules (Swift) * Android native modules (Kotlin) * Native UI components * Bridging patterns * Third-party SDK integration Fabric, TurboModules, and JSI **Topics:** * New architecture overview * Fabric renderer * TurboModules * JavaScript Interface (JSI) * Codegen * Migration strategies 200+ interview questions and answers **Topics:** * React Native fundamentals * Architecture questions * Performance optimization * System design * Coding challenges * Behavioral questions Build a complete enterprise-grade application **Project: Full-Stack E-Commerce App** * User authentication * Product catalog with search * Shopping cart and checkout * Payment integration * Push notifications * Analytics and monitoring * App Store deployment *** ## Prerequisites **Before starting this course**, you should be comfortable with: * JavaScript ES6+ (arrow functions, destructuring, async/await, modules) * React fundamentals (components, props, state, hooks, context) * Basic TypeScript (types, interfaces, generics) * Git version control * Command line basics *** ## Development Environment * **Node.js 18+** - JavaScript runtime * **npm, yarn, or pnpm** - Package manager * **VS Code** - Recommended editor with extensions * **Expo Go** - Mobile app for testing * **macOS** - Required for iOS development * **Xcode 15+** - iOS simulator and build tools * **CocoaPods** - iOS dependency manager * **Apple Developer Account** - For App Store deployment (\$99/year) * **Android Studio** - Android SDK and emulator * **Java 17+** - Required for Android builds * **Google Play Console** - For Play Store deployment (\$25 one-time) *** ## Learning Path ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ React Native Enterprise Mastery │ │ Learning Path │ ├─────────────────────────────────────────────────────────────────────────────┤ │ │ │ Week 1-2: Foundations │ │ ├── Introduction & Architecture │ │ ├── Environment Setup │ │ ├── Project Structure │ │ ├── TypeScript Integration │ │ └── Core Components │ │ │ │ Week 3-4: UI & Navigation │ │ ├── Styling & Theming │ │ ├── Flexbox Mastery │ │ ├── Navigation Fundamentals │ │ └── Advanced Navigation │ │ │ │ Week 5-6: State & Data │ │ ├── State Management │ │ ├── Redux & Zustand │ │ ├── Lists & Virtualization │ │ ├── Forms & Validation │ │ └── Networking & APIs │ │ │ │ Week 7-8: Data & Auth │ │ ├── React Query │ │ ├── Local Storage │ │ └── Authentication │ │ │ │ Week 9-10: Native Features │ │ ├── Native Modules │ │ ├── Camera & Media │ │ ├── Maps & Location │ │ └── Push Notifications │ │ │ │ Week 11-12: Animations & Performance │ │ ├── Animation Fundamentals │ │ ├── Reanimated & Gestures │ │ ├── Performance Optimization │ │ ├── Memory Management │ │ └── Debugging │ │ │ │ Week 13-14: Testing │ │ ├── Unit Testing │ │ ├── Integration Testing │ │ └── E2E Testing │ │ │ │ Week 15-16: Production Readiness │ │ ├── Accessibility │ │ ├── Security │ │ ├── Offline-First │ │ ├── Real-time Features │ │ ├── Internationalization │ │ ├── Profiling │ │ └── Error Handling │ │ │ │ Week 17-18: Architecture & DevOps │ │ ├── Architecture Patterns │ │ ├── Monorepo │ │ ├── Expo Deep Dive │ │ ├── CI/CD │ │ ├── Deployment │ │ └── OTA Updates │ │ │ │ Week 19-20: Advanced & Capstone │ │ ├── Analytics │ │ ├── Feature Flags │ │ ├── A/B Testing │ │ ├── Design Systems │ │ ├── Component Libraries │ │ ├── Native Integration │ │ ├── New Architecture │ │ ├── Interview Prep │ │ └── Capstone Project │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ``` *** ## Projects You'll Build CRUD operations, local storage, and state management API integration, geolocation, and beautiful UI Infinite scrolling, image optimization, and caching Real-time messaging with WebSockets Full shopping experience with payments Health data, charts, and background tracking Camera, filters, and media management Real-time tracking and route optimization Security, biometrics, and transactions Analytics, charts, and data visualization *** ## Ready to Start? Start with Module 1: Introduction & Architecture to understand how React Native works under the hood *** ## Interview Deep-Dive **Strong Answer:** * React Native is a strong fit here. A fintech startup with a 4-month timeline cannot afford separate iOS and Android teams (that is 8-12 engineers minimum). React Native lets 3-4 full-stack engineers ship both platforms from a single TypeScript codebase, with 90%+ code reuse. * Key advantages for fintech specifically: over-the-air updates via EAS Update mean you can push compliance fixes and critical bug patches without waiting for App Store review (which can take 1-7 days). For a financial app, this is operationally significant. * Risks to flag: performance-sensitive screens like real-time stock charts or complex financial calculators may need native modules. Plan for this upfront by choosing a modular architecture where these components can be swapped from JS to native without rewriting the surrounding screens. Also, fintech apps face stricter App Store review scrutiny -- ensure biometric authentication, certificate pinning, and secure storage are implemented from day one, not bolted on later. * The Hermes engine should be enabled (it is the default now), which gives 53% faster startup and 26% less memory usage compared to JSC. On budget Android phones (common in emerging markets), this is the difference between a usable app and one that gets uninstalled. **Follow-up:** Six months post-launch, the app has grown to 50 screens with 200K daily active users. The CEO wants to add a feature that requires AR-based check scanning. How do you approach this without rewriting the app? **Follow-up Answer:** * This is a textbook case for a native module. Write the AR check scanning in Swift (using Apple Vision framework on iOS) and Kotlin (using ML Kit on Android). Expose a single `scanCheck()` function to the JS layer via a TurboModule that returns the extracted check data (routing number, account number, amount). * The rest of the flow -- confirmation screen, submission to your API, success/error handling -- stays in React Native. The native module handles only the camera and ML inference, which need to run at native speed. * Use Expo Modules if you are on Expo, or the standard TurboModule spec if on bare CLI. Either way, the JS-side API is a simple async function call. The 50 existing screens are completely untouched. * At 200K DAU, also invest in a proper CI/CD pipeline with EAS Build for automated builds, Detox for E2E testing of the check scanning flow, and Sentry for crash monitoring specific to the native module. **Strong Answer:** * The old bridge was an asynchronous, JSON-serialized message queue between the JS thread and the native thread. Every interaction -- layout measurements, native module calls, event dispatching -- was serialized to JSON, put in a queue, and deserialized on the other side. This worked for most cases, but created three categories of problems: animation jank (each frame needed a round-trip), layout measurement delays (you could not synchronously measure a native view from JS), and startup overhead (all native modules loaded eagerly at launch). * JSI (JavaScript Interface) replaces the bridge with direct C++ bindings. JavaScript can hold references to native C++ objects and call methods on them directly -- no serialization, no async queue. This enables synchronous calls when needed (like measuring a view's dimensions before rendering) while still supporting async calls for non-blocking operations. * Fabric replaces the old UI Manager with a new renderer that creates a shared C++ shadow tree accessible from both JS and native threads simultaneously. This enables concurrent React features (Suspense, Transitions) and synchronous layout, which eliminates the "layout flash" where a component would briefly render with wrong dimensions. * TurboModules replace the old NativeModules system with lazy-loaded, type-safe modules. Instead of loading every native module at startup (even those the user may never use), TurboModules load on first access. For an app with 30 native modules where the user only touches 5 in a typical session, this significantly reduces cold start time. * In production, the aggregate impact is measurable: apps on the new architecture report 10-30% faster startup, smoother animations, and reduced memory usage. Meta's own apps were the first to migrate, validating the improvements at scale. **Follow-up:** You are migrating a large production app from old architecture to new architecture. What is your migration strategy, and what are the biggest risks? **Follow-up Answer:** * Migrate incrementally, not all at once. The new architecture supports interop mode where old-style native modules and Fabric components coexist with new-style ones. Start by enabling the new architecture in your app config, which activates JSI and the interop layer. * Migrate native modules to TurboModules one at a time, starting with the simplest ones (pure data modules with no UI). Write Codegen specs in TypeScript, generate the native interfaces, and implement them. Test each module in isolation before moving to the next. * The biggest risk is third-party library compatibility. Many popular libraries (Reanimated, React Native Screens, Gesture Handler) already support the new architecture, but check every dependency. Libraries that directly access the old bridge API will break. Audit your `package.json` against the React Native New Architecture compatibility tracker. * Run performance benchmarks before and after each migration step. The new architecture should improve performance, but regressions can happen if a library's interop path is slower than its old direct bridge path. Have rollback capability by maintaining a feature flag that switches between old and new architecture builds during the transition period. **Strong Answer:** * First, reframe the conversation: guaranteeing 60fps on every device is not realistic, but you can guarantee it on 95th-percentile devices and ensure graceful degradation on the rest. The key is defining a "minimum supported device" (e.g., Android devices with 3GB+ RAM, released 2021 or later) and testing against that baseline. * For list performance specifically, use FlashList instead of FlatList. FlashList is Shopify's drop-in replacement that uses a RecyclerView-inspired architecture -- it recycles views aggressively, which matters enormously on memory-constrained Android devices. Set `estimatedItemSize` accurately to avoid layout thrashing. * Optimize list items: wrap each item in `React.memo` with a custom comparison function, avoid inline styles and arrow functions in `renderItem`, use `expo-image` with memory-disk caching for images (the built-in Image component does not cache on Android by default), and ensure images are served at the correct resolution (do not load a 2000px image into a 100px thumbnail). * Move expensive computations off the JS thread. Use `InteractionManager.runAfterInteractions()` for non-urgent work, `requestAnimationFrame` for frame-aligned updates, and Reanimated worklets for animation-related calculations that must run on the UI thread. * Set up automated performance testing in CI. Use Detox to scroll through representative lists and capture frame timing metrics. Alert the team when a PR causes the p95 frame time to exceed 16ms. Without automated enforcement, performance regressions will creep in with every feature addition. **Follow-up:** The budget Android phone drops to 45fps during rapid scrolling of a list with complex card items that include images, badges, and animated progress bars. You have already applied all the optimizations above. What is your next move? **Follow-up Answer:** * Profile with Android Studio's CPU Profiler to identify whether the bottleneck is the JS thread (React reconciliation) or the UI thread (native view operations). If it is the JS thread, the React Profiler will show which components are re-rendering unnecessarily. * Consider simplifying the card layout for low-end devices. Use a `Platform` check combined with a device tier detection (based on available RAM) to render a simplified card variant that removes the animated progress bar and uses a static placeholder. This is the same approach Instagram uses -- they serve simpler UI to lower-end devices. * For the animated progress bars specifically, ensure they use Reanimated shared values (not React state) and `useAnimatedStyle` with `useNativeDriver`. If the animations are still costly, batch them -- only animate progress bars for items currently visible on screen, not for items in the buffer zone. * As a last resort, reduce the `windowSize` and `maxToRenderPerBatch` props on FlashList to lower the number of items rendered outside the viewport. This trades scroll smoothness (more blank areas during fast scrolling) for frame rate stability.