useReducer: Manage Complex State with Predictable Actions
useReducer centralizes complex state logic. Instead of setting state directly, you "dispatch" actions describing what happened. It's ideal for state with many sub-values or when the next state depends on the previous one.
React Context API: Avoid Prop Drilling
React Context is like a global announcement system for a component tree, letting distant children access data without passing it through every intermediate component. Use it for app-wide state like themes or user authentication.
React Navigation State: The App's Internal Map
Think of React Navigation's state as a JS object that's the single source of truth for your app's screen history. It's essential for advanced tasks like state persistence or deep linking. The footgun: nested navigator state isn't guaranteed to exist.
Type-Safe Navigation in React Native with TypeScript
React Navigation uses TypeScript to type-check screens and params, giving you better autocompletion. You define types for route params and augment a global navigator type so hooks like `useNavigation` understand your app's structure.
React Native Auth Flows: Conditional Navigators
Think of your app as having two sets of maps: one for guests, one for members. React Navigation swaps the entire map when a user logs in, not just moves them. This is the key to preventing users from back-navigating to the login screen after.
React Navigation Lifecycle: Screens Don't Unmount
Unlike the web, React Native screens don't unmount when you navigate away; they stay mounted to preserve state. This means a standard `useEffect` only runs once. To run code when a screen is shown, you must listen for the `focus` event.
Native Stack Navigator: Native Performance, Less Customization
Native Stack Navigator uses the OS's built-in screen management for smooth, performant transitions. Use it for standard screen stacks where a native look and feel is key.
Nested Navigators: Building Complex UI Flows
Think of nested navigators as UI building blocks, placing one navigator (like tabs) inside a screen of another (a stack). This creates flows like a main tab bar inside a stack for modals.
React Navigation: Configuring Screen Options
Treat screen options like CSS for your React Navigation screens, letting you style headers and tabs. Apply styles to a single `Screen` with the `options` prop, or to a `Group` of screens with `screenOptions`.
Escape Prop Drilling with React Navigation Hooks
React Navigation hooks let components control navigation without prop drilling. `useNavigation` gives you the `navigation` object to change screens, while `useRoute` provides data about the current screen. The footgun: they only work inside a navigator.
Passing Data to Routes in React Native
Think of it like passing arguments to a function. When you navigate to a new screen, you give it the data it needs, like a product ID. This is key for master-detail views. The footgun: only pass JSON-serializable data to avoid breaking state persistence.
Drawer Navigator: Your App's Slide-Out Main Menu
A Drawer Navigator is your app's slide-out 'hamburger' menu. Use it for primary navigation between distinct sections like Home, Profile, and Settings. A common footgun is misconfiguring `backBehavior`, leading to non-intuitive back button actions for users.
Stack Navigator: JavaScript-based Screen Transitions
Stack Navigator treats your screens like a stack of cards: push a new screen on top, pop it off to go back. It’s ideal for standard navigation flows, but its JavaScript-based implementation means you trade the performance of a native solution for…
React Native Reanimated: Off-Thread Animations
Reanimated moves animations off the busy JavaScript thread onto the native UI thread. This ensures smooth, 60-120 fps performance for gestures and transitions, even during heavy JS computation.
Expo Application Services (EAS): The Cloud Toolchain for React Native
Expo Application Services (EAS) is the cloud toolchain for production React Native apps. It handles complex native builds, app store submissions, and over-the-air updates. The main footgun is confusing it with the local `expo` CLI for development.
Metro: The JavaScript Bundler for React Native
Metro bundles your React Native app's JavaScript, finding all modules, transpiling them for the device, and merging them into one file. It's what powers `npx react-native start`.