All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4247 bites
Page 59
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.
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 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 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.
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.
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.
Touchable Components in React Native
TouchableOpacity and siblings wrap views to give press feedback by dimming or highlighting. Use them for simple taps on buttons or list items. They inject extra Animated.View nodes that can silently break layout, and Pressable has superseded the entire family.
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.
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.
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…
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.
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.
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.
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.
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.
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.
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.
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.
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 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.