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

You have a Kotlin app where search input emits quickly while network responses arrive slowly. How would you design the Flow pipeline?

Sample answer outline

A solid answer uses debounce to avoid firing on every keystroke, distinctUntilChanged to skip repeated queries and flatMapLatest to cancel stale searches. Network work should run on the right dispatcher and expose a sealed UI state for loading, success and error. The pipeline should be collected from a lifecycle-aware scope so it stops when the screen is gone. Candidates often use collect on every query, which lets slow responses race and overwrite newer results. Strong answers mention testing with virtual time because timing-heavy Flow code is otherwise fragile.

Reference implementation (kotlin)

val uiState: StateFlow<SearchState> =
    queryFlow
        .debounce(300)
        .map { it.trim() }
        .distinctUntilChanged()
        .flatMapLatest { query ->
            flow {
                emit(SearchState.Loading(query))
                emit(SearchState.Results(repository.search(query)))
            }.catch { emit(SearchState.Error(query, it)) }
        }
        .stateIn(viewModelScope, SharingStarted.WhileSubscribed(5_000), SearchState.Idle)

Expect these follow-ups

• What is the difference between flatMapLatest and flatMapMerge here?
• How do you keep cached results visible while a refresh is loading?
• How would you test the debounce behaviour?

As asked

You are starting a major iOS feature that has complex navigation, custom animations and a long support window. How do you choose between SwiftUI, UIKit or a hybrid?

Sample answer outline

A strong answer starts with product and platform constraints rather than preference. SwiftUI is productive for state-driven screens and modern OS targets, but UIKit still gives mature control over complex navigation, collection views and custom transitions. A hybrid can work well if ownership boundaries are clear, for example SwiftUI feature screens hosted inside a UIKit shell. The candidate should mention minimum iOS version, team skill, testability, accessibility and long-term maintainability. Weak answers treat SwiftUI as automatically newer and better without naming the actual risks.

Expect these follow-ups

• Where do SwiftUI and UIKit lifecycle models clash?
• How do you test a hybrid screen?
• What would make you reverse the decision after a prototype?

As asked

Design offline support for a React Native field app where users create inspections without network access and sync them later. How do you handle conflicts and retries?

Sample answer outline

Use a local durable store such as SQLite or WatermelonDB for inspection records and an outbox table for pending mutations. Each mutation needs an idempotency key so retries after app restarts or flaky networks do not duplicate server state. Conflict handling depends on domain rules: last-write-wins is rarely acceptable for inspections, so prefer field-level merge, server validation, or explicit user resolution. Sync should be resumable, ordered where required, and observable through local status per record. Weak answers hide conflict resolution behind a generic queue and never define the server contract.

Expect these follow-ups

• How do you sync attached photos without exhausting device storage?
• What does the server need to store for idempotency?
• How do you test a week of offline edits?

As asked

Write and explain a React Native FlatList setup for 10,000 message rows. The list should avoid avoidable row renders and keep scroll performance stable.

Sample answer outline

The candidate should stabilise renderItem and keyExtractor, memoise row components, and provide getItemLayout when row height is fixed. Initial render and window sizes should be tuned to the screen rather than set to huge values that hide poor rendering. The answer should mention image sizing, avoiding inline closures in rows, and measuring with the performance monitor. getItemLayout is only safe when row heights are known; variable height feeds need measurement or a different strategy. A common mistake is putting all messages into parent component state and changing the array identity on every tick.

Reference implementation (tsx)

import React, { memo, useCallback } from "react";
import { FlatList, Text, View } from "react-native";

type Message = { id: string; author: string; body: string };

const ROW_HEIGHT = 72;

const MessageRow = memo(function MessageRow({ message }: { message: Message }) {
  return (
    <View style={{ height: ROW_HEIGHT, padding: 12 }}>
      <Text>{message.author}</Text>
      <Text numberOfLines={2}>{message.body}</Text>
    </View>
  );
});

export function MessageList({ messages }: { messages: Message[] }) {
  const renderItem = useCallback(
    ({ item }: { item: Message }) => <MessageRow message={item} />,
    [],
  );

  return (
    <FlatList
      data={messages}
      keyExtractor={(item) => item.id}
      renderItem={renderItem}
      getItemLayout={(_, index) => ({
        length: ROW_HEIGHT,
        offset: ROW_HEIGHT * index,
        index,
      })}
      initialNumToRender={12}
      windowSize={7}
      removeClippedSubviews
    />
  );
}

Expect these follow-ups

• What if row heights are variable because images load later?
• How do you keep an inverted chat list anchored when new messages arrive?
• When is FlashList a better choice?

As asked

How do you hand off a motion-heavy interaction so engineers can implement it accurately across web and mobile?

Sample answer outline

The answer should include a prototype, but not rely on the prototype alone. Specify states, triggers, timing, easing curves, delays, interruption rules, token names, and fallback behaviour for low-power devices and reduced-motion users. Good candidates explain how they collaborate with engineers early to check platform constraints rather than throwing over an After Effects file. They should also mention acceptance criteria and a review loop using real builds, because motion often changes once it meets real data. The common trap is specifying pixels and frames without explaining the purpose of the movement.

Expect these follow-ups

• What do you include in the spec for interrupted gestures?
• How do you handle different animation APIs on iOS, Android, and web?
• When would you accept an implementation that differs from your prototype?