More in React Native — page 12
Handling Permissions in React Native
A unified permissions API gives you one way to request device features, avoiding separate logic for iOS and Android. It's essential for apps needing the camera or location. The main footgun is forgetting to configure the native project files.
Shared Element Transitions: Morphing Views Across Screens
Morph a component from one screen to another during navigation. By giving two components the same `sharedTransitionTag`, Reanimated animates the view's properties (size, position) between screens for a seamless transition.
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.
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.
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.
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.
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.
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.
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…
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.
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.
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.
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.
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.
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.