Intermediate everything in React Native, page 8
Using Device Motion Sensors in React Native
Treat device sensors as a data stream. Instead of polling, subscribe to an observable that emits readings for acceleration or rotation. This is for building compasses, shake detection, or AR views.
React Native Camera Access: Permissions and Setup
Accessing the camera is a two-part contract: declare your intent in native config files, then ask the user for permission at runtime. This is required for any photo, video, or scanning feature.
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.
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.
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.
Jotai for React Native: Atomic State, Native Performance
Jotai brings minimalist, atomic state management to React Native, treating state as small, independent pieces. It's ideal for sharing state without prop drilling and offers full compatibility out of the box, including persistence via atomWithStorage.
Redux Toolkit: The Opinionated Way to Write Redux
Redux Toolkit (RTK) is the official, opinionated way to write Redux, bundling best practices to eliminate boilerplate. Use it for any new Redux app to simplify store setup and state updates.
React Redux: Connecting Components to a Global Store
React Redux connects your React UI to a global Redux state store, letting components read data and dispatch updates. It's used to avoid "prop drilling" shared state across the app.
Redux: A Single Source of Truth for App State
Redux centralizes app state into a single "store." Instead of components managing state locally, they dispatch actions to a global reducer. Use it when many components share data.
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.
React Native: Infinite Scroll with onEndReached
The onEndReached prop is a callback that fires when you scroll near a list's end, letting you fetch more data. Use it in FlatList for feeds or catalogs. The main footgun: it can fire multiple times, so use a loading flag to prevent redundant API.
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.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles