Advanced everything in React Native, page 3
Turbo Modules: Type-Safe Native Code in React Native
Turbo Modules let your JS code call native APIs synchronously, skipping the slow async bridge. Use them to access device features or high-performance native libraries.
Profiling React Native on Android with System Tracing
System Tracing helps you find UI jank on Android by showing where time is spent in each 16ms frame. Use it in Android Studio to diagnose stuttering animations by inspecting the UI, JS, and Native Module threads.
Inline Requires: Defer JS Loading in React Native
Inline requires are just-in-time loading for code. Instead of loading everything at startup, you pull in modules only when needed, improving initial app speed. This is ideal for heavy components. The footgun: module side effects will execute later.
Connect React Native Apps to BLE Hardware
react-native-ble-plx is the bridge from your RN app to physical BLE hardware. Use it to scan for, connect to, and exchange data with peripherals like sensors or smart locks, without writing native code.
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.
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.
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.
Immer: Write Mutable Code for Immutable State
Immer lets you write simple, mutable-style code to produce an immutable next state. It's essential in Redux or with React's useState to avoid complex spread operators for deep updates. The footgun: mutations are only safe inside Immer's produce function.
Memoized Selectors: Avoid Needless Re-renders
A memoized selector caches its result, re-running only if its inputs from the Redux store change. Use it to compute derived data like a filtered list without triggering needless re-renders.
Redux Saga: Managing Side Effects with Generators
Redux Saga runs side effects in a separate thread-like process. It listens for Redux actions and executes complex async tasks, like API calls, keeping that logic out of your components.
Redux Middleware: Intercepting Actions Before Reducers
Redux middleware is like an Express middleware for your state, intercepting actions before they hit the reducer. It's used for logging, crash reporting, or async API calls. The footgun is forgetting to call next(action), which silently blocks the action.
Shopify FlashList: Fixing React Native's Blank Cells
FlashList is a performant drop-in replacement for React Native's FlatList. It recycles components to eliminate blank cells during fast scrolling in long lists. The footgun is assuming it fixes all performance issues, not just rendering.
VirtualizedList: The Engine Behind React Native Lists
VirtualizedList is the engine behind React Native's efficient lists, rendering only visible items to save memory. Use it when FlatList isn't flexible enough, like for immutable data. The main footgun: component state is lost when items scroll out of view.
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.
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 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.
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.
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.
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