More in React Native — page 14
FlatList: Performant Virtualized Lists in React Native
FlatList is a "window" over your data, only rendering visible items to save memory and keep scrolling smooth. It's ideal for long lists like feeds or contacts. The main footgun: if items don't update, you forgot to pass changing state to the `extraData` prop.
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.
RefreshControl: The Pull-to-Refresh Handler
RefreshControl adds the native "pull-to-refresh" spinner to your lists. Use it inside a ScrollView or FlatList to let users manually trigger a data update. The footgun: you must control the 'refreshing' prop manually or the spinner vanishes instantly.
PanResponder: The Gesture State Machine
PanResponder turns raw touch events into a single, stateful gesture, like dragging an object. It's used to build draggable elements by providing a `gestureState` object with velocity and distance. The footgun is confusing `moveX/Y` with `dx/dy`.
The Gesture Responder System: Who Gets the Touch?
The Gesture Responder System is React Native's negotiation protocol that decides which component owns a touch. It's how the framework distinguishes a button tap from a scroll. The main footgun is that the deepest component wins the touch by default.
React Native Slider: Selecting a Value from a Range
A slider is a visual control for selecting a numeric value from a range, like a volume knob. Use it for settings like brightness or price filters. The main footgun is forgetting to capture the slider's value in your app's state on value change.
React Native's Controlled Switch Component
The Switch component is a 'controlled' input; it doesn't manage its own state. You use it for on/off settings by telling it what to display via the `value` prop and updating that state in the `onValueChange` callback. The footgun is forgetting this link.
React Native's Basic Button Component
The `Button` component is React Native's 'easy button' for basic user interactions. It renders a native-looking button with just a `title` and `onPress` handler. Its main footgun is its lack of styling options; for custom designs, use `Pressable` instead.
React Native's Dimensions API: The Manual Approach
React Native's `Dimensions` API is a low-level way to get a one-time snapshot of screen or window sizes. Use it outside React components or when you need to subscribe to changes manually. The footgun is caching its value, as it won't update on rotation.