More in Mobile Dev — page 43
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.
Platform.select: Write Once, Adapt Anywhere
Platform.select is a switch statement for your UI, letting you apply styles or components for iOS and Android from one object. It's ideal for tweaking styles in StyleSheet.create or rendering different components. The footgun is forgetting a `default` key.
React Native Modal: Presenting Content Above Other Views
A Modal is a temporary screen takeover, presenting content above your current view. Use it for critical alerts or forms that demand user focus. The main footgun: forgetting `onRequestClose` disables the Android back button, trapping your user.
alignItems: Aligning Children on the Cross Axis
alignItems arranges children along the cross axis of a flex container. If items flow down (column), it aligns them left/right. If they flow across (row), it aligns them top/bottom. The footgun: `alignSelf` on a child overrides this parent property.
Pressable: A More Powerful Way to Handle Touches
The Pressable API wraps any component to detect granular press stages like press-in, press-out, and long-press. Use it for custom interactive elements. The main footgun is forgetting to use `hitSlop` on small targets, making them difficult to tap.
React Native TextInput: Handling User Input
TextInput is your app's keyboard entry point. Use it for search bars and forms, configuring features like auto-capitalization and keyboard type. Be careful with styling: Android adds a default underline, and multiline mode can break single-side border styles.
ScrollView: For Simple, Bounded Content
ScrollView is a container for a limited amount of scrollable content, rendering everything inside at once. Use it for short forms or articles where upfront loading is fine. The footgun: it's slow for long lists—use FlatList instead to avoid performance hits.
React Native's Image Component
The `Image` component is React Native's tool for displaying pictures from network URLs, local app assets, or the device's camera roll. The biggest footgun: you must manually set `width` and `height` for any image loaded from a URL or it won't appear.
React Native's Text Component: Beyond Displaying Words
The React Native `<Text>` component creates a special text layout context, not a Flexbox one. Use it for all text, nesting components to style parts of a sentence.
The View Component: React Native's UI Building Block
Think of `View` as the `<div>` of React Native. It’s the fundamental container for grouping and styling other components, used everywhere to structure layouts with flexbox. The footgun: Text must be in a `<Text>` component, not directly in a `View`.
Adding Native Code to Expo (The Modern 'Eject')
Adding native code to Expo no longer means 'ejecting'. You create a custom development build with your specific native modules. This is for when a library has native code not in the Expo SDK. The footgun is thinking you must abandon Expo's tools and services.
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.
The React Native Bridge: Why It's Being Replaced
Think of the React Native Bridge as an asynchronous JSON message queue between your JavaScript code and the native UI. This design is the source of its core limitation: communication delays that cause visible UI jank and prevent modern React features.
Hermes: The JS Engine for Faster React Native Apps
Hermes is a JavaScript engine optimized for React Native that prioritizes fast startup and low memory use. It's the default for new apps, pre-compiling JS to bytecode at build time. The footgun: don't just check a global variable; benchmark release builds.
React Native: Platform-Specific Code
React Native lets you write platform-specific logic without ejecting. Use the `Platform` module for small style tweaks, and file extensions (`.ios.js`) for swapping entire components. The footgun is overusing `Platform.select` for complex UI, creating clutter.