React Native
198 bites tagged React Native — interview questions with model answers, and 60-second explainers.
Performance trade-offs of abstracting native UI
Bridge/serialization overhead, JS-thread bottlenecks for lists, and mitigations like virtualization, native modules, and profiling both threads. cost of cross-platform abstraction.
UI unresponsive during large data processing on main thread
Tests RN's dual-thread model and 16.67ms frame budget. Strong answers separate JS and UI thread roles, blame long JS tasks for dropped frames, and propose chunking data to yield the event loop. Red flag: claiming memoization alone solves thread blocking.
ESLint: Catch React Native Bugs Before Runtime
ESLint scans your React Native code before execution to catch syntax errors, unused imports, and missing accessibility labels in your IDE or CI pipeline. The footgun is ignoring warnings; silenced rules let bugs ship to production.
C++ as React Native's Cross-Platform Engine
C++ is the shared engine under React Native's New Architecture, powering JSI and cross-platform TurboModules. One C++ module replaces separate Android and iOS native code.
New Shadow Tree: Async Layout Engine
The New Shadow Tree is React Native's C++ layout engine that runs off the JS thread. It calculates Yoga flexbox asynchronously before mounting native views.
Enabling React Native's New Architecture
Enabling React Native's New Architecture swaps the async bridge for direct JSI calls. Set build flags to use Fabric and TurboModules. It is not a drop-in upgrade; legacy libraries often break without interop support or proper codegen types.
Mapping JavaScript Props to Native Views
React Native bridges JS props to native views via annotated setters. Use it when wrapping platform views like maps or video players. The footgun is a missing annotation: the prop crosses the bridge but native never receives it, causing silent failures and…
Bridging Data Types in React Native
The React Native bridge only moves serializable data, so values crossing between JS and native must be primitives, arrays, or plain objects. You face this building native modules. The footgun is passing functions or class instances; the bridge strips them.
React DevTools Profiler: Find Slow Renders
The Profiler is a stopwatch for your component tree. It records why each render happened and how long it took, so you can spot unnecessary re-renders in React Native. The footgun is chasing render counts instead of actual frame time.
React Native IAP: The Store Bridge
React Native IAP is a bridge, not a store. You ask Apple or Google to charge the user and listen for a receipt. Use it for subscriptions or feature unlocks. The footgun is forgetting to finish transactions natively, leaving users charged but stranded.
React Native Offline Sync Strategies
React Native offline sync writes to local storage first, then reconciles with the server later. It keeps forms and messages working offline. The footgun is non-idempotent mutations replayed, creating duplicates or overwriting fresh data.
useAnimatedGestureHandler: UI-Thread Gesture Worklets
useAnimatedGestureHandler bridges RNGH events to Reanimated shared values on the UI thread via worklets, keeping pan gestures at 60fps without JS drops. The footgun is reading JS state inside worklet, which crashes because worklets run in an isolated runtime.
React Native Gesture Handler: Native-Driven Touch
React Native Gesture Handler moves touch recognition to the native thread so gestures stay smooth when JavaScript is busy. Use it for swipeable cards and bottom sheets. The footgun is using it without Reanimated, gaining complexity without the frame-rate win.
Debugging React Native Performance
React Native drops frames when the JS thread overloads, not just from bad code. Complex re-renders, console.log statements, or dev mode freeze touches and animations. Never trust performance numbers from development builds; always test in release mode.
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.
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.
Appium: Test Your React Native App Like a Real User
Appium tests your app like a real user, tapping and scrolling on actual devices to catch bugs your unit tests miss. It's for verifying full user flows across iOS and Android. The footgun: relying only on unit tests gives a false sense of security.
React Native Codegen: Bridging JS and Native
React Native's Codegen auto-generates the boilerplate 'glue code' connecting your JavaScript specs to native implementations. It's essential for building Turbo Modules and Fabric Components.
Android ViewManager: Bridging Native UI to React Native
A ViewManager is a factory for native Android UI. It tells React Native how to create and update a native view from JavaScript, bridging the gap between JS and native platform widgets. It's used for custom or third-party UI.
React Native: Creating an iOS Native Module
An iOS Native Module is a bridge, letting your JavaScript code call directly into native Objective-C or Swift. Use it to access platform APIs unavailable in React Native or for performance-critical tasks.
React Native Secure Storage: Using Keychain and Keystore
Use the device's native vault (Keychain/Keystore) to store secrets, not plaintext in AsyncStorage. It's for securely persisting small data like API tokens or private keys. The footgun is treating it like a general database; it's slow and for secrets only.
React Native Geolocation: The Web API on Mobile
Think of it as the web's `navigator.geolocation` API for your native app. Use it for map features or location-based content. The biggest footgun on iOS is forgetting location usage descriptions in `Info.plist`, which causes silent permission failures.
React Native NetInfo: Know Your Connection State
The NetInfo API is your app's network sensor, telling you if you're online and whether you're on WiFi or cellular. Use it to show an 'offline' banner or defer large downloads. The main footgun: `isConnected` only confirms a local link, not server reachability.
useAnimatedStyle: Link Shared Values to Component Styles
The `useAnimatedStyle` hook connects a shared value to a component's style, running animations on the UI thread. It's a reactive StyleSheet for dynamic properties like opacity or transform. The footgun: never mutate shared values inside the hook.
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.