React Native
198 bites tagged React Native — interview questions with model answers, and 60-second explainers.
Animated: Drive Styles with Values, Not Setters
React Native's Animated API lets you drive styles with a value, not manual setters. Use it for performant fades and slides. The biggest footgun is forgetting `useNativeDriver: true`, which keeps animations smooth by running them off the JS thread.
Animated.Value: The Driver for React Native Animations
Animated.Value is a single number that drives multiple UI properties, like one dimmer switch controlling many lights. Use it to fade, move, or scale components. The main footgun: you cannot read its value synchronously and must use an asynchronous listener.
Android Product Flavors for App Environments
Android Product Flavors let you build distinct app variants (like dev, staging, prod) from one codebase, each with its own configuration. Use this for separate builds or white-labeling.
Why Xcode Schemes Aren't in React Native 'Get Started' Docs
React Native's 'Get Started' docs favor frameworks like Expo, which handle build environments for you. Xcode Schemes and Configurations are powerful tools you use when managing the native iOS project yourself, a layer deeper than the basics.
PixelRatio: Bridge Layout Units to Physical Pixels
PixelRatio is your app's translator, converting abstract layout units into physical pixels and respecting the user's chosen font size. Use it to fetch correct image sizes and make fonts accessible. Ignoring `getFontScale()` creates a fixed, inaccessible UI.
GraphQL: Ask for Exactly What You Need
GraphQL lets clients request exactly the data they need from a single endpoint, avoiding over-fetching. It's ideal for mobile apps, but beware of the N+1 problem where one query can trigger many database lookups on the backend.
AbortController: Stop Fetch Requests You No Longer Need
An AbortController is a kill switch for network requests. Use it to cancel a `fetch` when a user navigates away. The main footgun is not handling the `AbortError` that `fetch` throws, which can look like a real network failure.
FormData: The Right Way to Upload Files
FormData is your digital envelope for file uploads. It packages files and text into a `multipart/form-data` payload for `fetch`. Use it in React Native to upload images or videos. The footgun: don't set the `Content-Type` header yourself; `fetch` handles it.
Axios Interceptors: Middleware for Your API Calls
Axios Interceptors are like middleware for your API calls, letting you globally modify requests before they're sent or responses before they're handled. Use them to inject auth tokens or log activity. The footgun: request interceptors run last-in-first-out.
TanStack Query: Manage Server State, Not Client State
TanStack Query treats server data as a cache, not local state. It automates fetching, caching, and background updates to keep your React Native app in sync with your backend.
Memoizing List Items with `React.memo`
Wrap list items in `React.memo` to prevent them from re-rendering when their props are unchanged. In a `FlatList`, this stops items from re-rendering just because the list scrolled, keeping the UI smooth. The footgun is assuming it's a free optimization.
SectionList: Displaying Grouped Data Efficiently
SectionList renders long lists grouped into sections, like a contact list. It virtualizes content, rendering only visible items to save memory. A common footgun: it won't re-render on external state changes unless you pass that state via the `extraData` prop.
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.
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.
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'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 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.
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'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.
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.
Get React Native bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.