React Native

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.

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.

GraphQL Mutations: Writing Data to Your Graph

Think of a GraphQL mutation as a remote function call for writing data. Unlike REST, you declare what data you want back from the server in the same operation. Use it for creating, updating, or deleting data, like submitting a form or liking a post.

WebSockets: A Persistent, Two-Way Connection

Think of a WebSocket as a dedicated phone line to a server, keeping the connection open for two-way conversation. It's ideal for real-time features like live chat or streaming stock tickers.

easy1 min read

SafeAreaView: Avoid Notches and Status Bars (Deprecated)

SafeAreaView was a component that automatically padded your UI to avoid device notches and system bars. It was a simple way to keep content visible on iOS, but it is now deprecated. The modern approach is to use the react-native-safe-area-context library.

ActionSheetIOS: Native iOS Action Menus

ActionSheetIOS presents a native iOS menu sliding up from the bottom, offering users contextual choices. It's ideal for simple actions like "Delete" or "Save" and can also trigger the native share sheet.

React Native: Navigating Platform-Specific Shadow Styles

React Native shadow APIs expose underlying platform differences. Use the web-like boxShadow for cross-platform consistency or the shadow* props for direct native control.

PermissionsAndroid: Requesting Runtime Permissions

PermissionsAndroid lets you ask for sensitive permissions like camera or location at runtime. Use its request method to show the native Android dialog. The biggest footgun is ignoring the NEVER_ASK_AGAIN result, which requires sending the user to system…

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.

React Native's Platform Build Glue

React Native integrates into Android via Gradle files. You edit settings.gradle and both build.gradle files to wire the React Native Gradle Plugin and enable autolinking. The footgun: editing the wrong build.gradle breaks native modules silently.

Managing Splash Screens in React Native

A splash screen bridges the gap between tapping your app icon and your React Native bundle finishing its load, preventing a jarring white screen. Use it to improve perceived performance during launch.

Linking Native Dependencies in React Native

Installing a native library is a two-step process: fetch the JS code, then link the native iOS/Android parts. This is required for packages like react-native-webview that need native APIs. The footgun is forgetting to run pod install for iOS and rebuild.

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.

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.

Adaptive React Native UIs for Tablets and Foldables

Adaptive UI is context-aware layout, not just stretching pixels. It matters when a phone app hits a tablet or a foldable unfolds. Most devs stop at flexbox and wonder why the tablet experience still feels like a blown-up phone.

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.

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.

useNativeDriver: Offload Animations from the JS Thread

useNativeDriver offloads animations from the JavaScript thread to the native UI thread for smoother performance. Use it in Animated API calls to prevent dropped frames.

withTiming: Animate Values Over a Set Duration

withTiming is your CSS transition for React Native animations. You define a target value, a duration, and an easing curve to create predictable, time-based animations like fades or size changes.