React Native
198 bites tagged React Native — interview questions with model answers, and 60-second explainers.
What do the spec file and CodeGen do in migration?
The spec file declares the component's typed props and events; CodeGen reads it at build time to generate type-safe C++/native and JS glue, catching mismatches early. migration mechanics.
What are the three pillars of the New Architecture?
JSI for direct JS-native calls, Fabric as the new renderer, and TurboModules for lazy native modules, all unified by CodeGen for type-safe bindings. new architecture vocabulary.
Direct events vs bubbling events in native components
Direct events fire only on the originating component; bubbling events propagate up the component tree like the DOM, allowing parent capture. native UI event semantics.
Contrast the legacy bridge with JSI
Bridge is async, serialized JSON, and batched; JSI enables direct synchronous C++ calls with no serialization, cutting latency and enabling lazy native modules. architectural comparison depth.
What data types cross the bridge, and their limits?
Only JSON-serializable types cross — strings, numbers, booleans, null, arrays, maps; functions and native object handles cannot. Handle complex data via ids, base64, or JSI host objects. bridge serialization limits.
How do you send a one-off event from native to JS?
Emit an event from native using an event emitter and subscribe in JS with NativeEventEmitter, or resolve a promise/callback for a single result. native-to-JS communication basics.
How do you debug a memory leak with Hermes heap snapshots?
Take a baseline snapshot, exercise the suspect flow repeatedly, snapshot again, and compare retained sizes and object counts that grow monotonically. heap analysis workflow.
How do you move a 500ms blocking task off the JS thread?
Offload to a native module or C++ TurboModule, a worklet/worker thread, or chunk the work and yield; never block JS. concurrency strategy in RN. wrapping a synchronous loop in a Promise and assuming it stops blocking.
How do Fabric, TurboModules, and JSI fix bridge limits?
JSI lets JS hold C++ host objects and call native synchronously without JSON serialization; Fabric renders concurrently and TurboModules lazy-load. deep knowledge of the new architecture.
What is bridge traffic and what causes dropped frames?
The bridge passes batched, serialized JSON messages between JS and native asynchronously; high-frequency events flood it. understanding the legacy async bridge.
Which two Flipper plugins diagnose an unresponsive UI?
Use the React DevTools profiler to find expensive renders and the Performance/Hermes plugin to spot a blocked JS thread or low FPS. practical profiling workflow.
What is Hermes and its advantages over JSC?
Hermes is an open-source engine optimized for RN, with faster startup via precompiled bytecode and lower memory use. knowledge of the JS engine powering RN. claiming Hermes JITs or always beats JSC at peak throughput.
useMemo and useCallback for stable references
UseMemo caches a computed value, useCallback caches a function identity across renders; both prevent recompute and unnecessary re-renders of memoized children. Memoization hooks.
Cost of console.log and production-safe debugging
Each console.log serializes data and, when devtools are attached, crosses the bridge synchronously, blocking the JS thread; strip logs in release and use Flipper, dev tools, or remote crash and analytics tools. Debug logging cost.
FlatList and list virtualization
Use FlatList (or SectionList) which virtualizes, rendering only items near the viewport and recycling as you scroll, unlike ScrollView which mounts everything. Efficient long lists. putting a huge map of items in a ScrollView.
The JS thread and why it bottlenecks performance
A single thread runs your JS, React reconciliation, and event handling; blocking it delays updates and gestures, and it is separate from the UI thread. RN threading basics.
Streaming accelerometer data without bridge overload
The bottleneck is flooding the async bridge and re-rendering at sensor rate; fix by throttling, processing in worklets or native, and animating via shared values not setState. High-frequency data on the bridge.
Handling push notifications across app states
Foreground onMessage, background and quit setBackgroundMessageHandler and getInitialNotification, plus data-only messages and native background tasks like Background Fetch or Notification Service… State-aware notification handling.
Building a custom native module
Write native classes in Kotlin/Java and Swift/Objective-C, expose methods via the module macros, register the module, and import via NativeModules with promises or events. Bridging native SDKs to JS.
Managing camera lifecycle in Vision Camera
Bind the isActive prop to screen focus via useIsFocused and to app state, so the camera stops when blurred or backgrounded. Camera resource lifecycle. leaving isActive always true or unmounting instead of toggling isActive.
Background GPS tracking challenges and approaches
Request always-allow permission, declare background modes, use a native background task or geofencing API rather than JS timers, manage battery and OS throttling. Background execution constraints.
Push notification data flow with APNs and FCM
Device registers and gets a token, server sends to FCM, FCM routes to APNs for iOS and directly for Android, the OS delivers to the app. End-to-end push architecture. thinking your server pushes straight to the device.
Getting a one-time GPS location
Ensure permission, then call a getCurrentPosition wrapped in a promise (or Expo Location.getCurrentPositionAsync) with await inside try/catch, reading coords.latitude and longitude. One-shot location retrieval.
Requesting runtime permissions on iOS and Android
Declare permissions in Info.plist and AndroidManifest, then check status and request at runtime just before use, handling granted, denied, and blocked. Permission lifecycle awareness.
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.