React Native engineer interview questions

As asked

A React Native feed screen drops frames when scrolling because it sends frequent events between JavaScript and native code. How do you diagnose and fix it?

Sample answer outline

Start with measurement in Flipper, React DevTools, native profilers, and frame timing rather than assuming React is the bottleneck. Look for expensive renders, oversized serialized payloads crossing the bridge, synchronous native calls, image decode work, and layout thrash. Fixes include moving high-frequency work to native or JSI, reducing event payloads, memoising row components, using FlatList correctly, and pre-sizing media. A senior answer explains the old bridge versus the new architecture without pretending migration alone fixes bad rendering. Candidates often miss that JavaScript can be idle while the UI thread is blocked.

Expect these follow-ups

• What changes under Fabric and TurboModules?
• How do you separate JavaScript thread stalls from UI thread stalls?
• When would you write a native module instead of staying in JavaScript?

As asked

Walk me through how the old React Native bridge works. What is serialized, what thread does each side run on, and what are the concrete performance consequences of crossing the bridge frequently?

Sample answer outline

A strong answer explains that the bridge is an asynchronous, batched, JSON-serialized channel between the JS thread and the native main thread. All messages are serialized to JSON, queued, and dispatched in batches, which means no synchronous calls are possible and large payloads or high-frequency calls create jank. The candidate should name the three threads (JS, native/main, shadow/layout) and explain that layout happens on the shadow thread via Yoga. They should mention that serialization cost is proportional to payload size, so passing large blobs or images over the bridge is expensive.

Expect these follow-ups

• How does the new architecture eliminate the serialization bottleneck?
• What debugging tool would you use to measure bridge traffic?

As asked

What windowing strategy does FlatList use, what causes blank cells during fast scroll, and when would you replace it with FlashList? What does FlashList do differently at the cell recycling level?

Sample answer outline

FlatList uses VirtualizedList under the hood and renders items into a scrollable container, unmounting items outside the window defined by windowSize and maxToRenderPerBatch. Blank cells during fast scroll happen when the JS thread cannot render new cells fast enough to fill the scroll velocity. FlashList (by Shopify) recycles cell components rather than unmounting/remounting them, similar to RecyclerView on Android, which avoids layout and reconciliation costs. A strong answer mentions that FlashList requires stable item types and heights for best performance and that it can render many more items per second than FlatList on mid-range devices.

Expect these follow-ups

• How do you handle variable-height items in FlashList?
• What is the recyclingKey prop and when do you need it?

As asked

Your team has an iOS-only feature (Live Activities) and an Android-only feature (predictive back gesture). What are the four ways React Native lets you write platform-specific code, and which would you use for each scenario?

Sample answer outline

The four strategies are: Platform.OS checks at runtime, Platform.select for conditional values, the .ios.tsx / .android.tsx file extension convention (Metro resolves the right file), and separate native modules per platform. For Live Activities you would write a dedicated iOS native module (Swift/ObjC) and expose it through a .ios.ts wrapper, with a no-op stub in .android.ts. For the predictive back gesture you would handle BackHandler on Android and likely write a native module or use a library that wraps BackEvent. A strong answer notes that file-extension splitting is the cleanest approach for large divergence, while Platform.select is fine for small style differences.

Expect these follow-ups

• How do you test the iOS-only code path in a Jest unit test?
• What happens in your CI pipeline when you run tests on a Linux machine and a component has an .ios.tsx file?

As asked

Walk me through the full path of a push notification from your backend server to the user's screen, naming every hop on iOS and Android separately. What can go wrong at each hop, and how do you debug a notification that silently never arrives?

Sample answer outline

On iOS: backend sends to APNS with the device token, APNS delivers to the device, iOS wakes the app or queues the notification. On Android: backend sends to FCM, FCM delivers via a persistent connection to the device, the app's FirebaseMessagingService receives it. Failure points: invalid or expired device tokens (must handle 410 responses from APNS), APNS certificate or p8 key misconfiguration, FCM project ID mismatch, doze mode or battery optimization on Android blocking FCM, notification permission not granted, and payload size limits (4 KB APNS, 4 KB FCM). Debugging involves checking APNS feedback, FCM delivery receipts, and @react-native-firebase/messaging event logs on device.

Expect these follow-ups

• How do you handle background data messages vs notification messages on Android?
• How do you test push notifications in a simulator where APNS is unavailable?

As asked

You are starting a new React Native app with 50 plus screens, a large authenticated user session, server state from a REST API, and local UI state. Walk me through how you would structure state management and which libraries you would and would not use.

Sample answer outline

A strong answer separates server state (React Query or SWR for caching, invalidation, and background refetching) from client/UI state (Zustand or Context for lightweight global state like theme, auth session, modals). Redux is often overkill for new projects but defensible for teams with Redux expertise or complex derived state needs. Jotai or Recoil suit fine-grained atom-level subscriptions. The candidate should note that mixing everything into Redux (including server cache) leads to cache invalidation complexity that React Query solves by design. They should also mention that React Native apps benefit from selecting minimal state slices to avoid unnecessary re-renders in lists.

Expect these follow-ups

• How does React Query's staleTime interact with app backgrounding on mobile?
• How do you persist Zustand state across app restarts?