All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8667 bites
Page 277
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.
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.