📱 Mobile Dev

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.

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.

easy1 min read

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.