📘 React Native Interview Playbook

The other pages teach the material. This page is for rehearsal: a question bank with what a strong answer contains, predict-the-behavior puzzles, machine coding tasks that come up in live rounds, mobile system design prompts, and a study plan.

Table of Contents

1. What Interviewers Look For
2. Question Bank
3. Predict the Behavior
4. Machine Coding Tasks
5. Mobile System Design Prompts
6. Production Scenarios
7. Cheat Sheets
8. Common Mistakes
9. Study Plan

1. What Interviewers Look For

Signals that raise your rating:

• Naming the thread a problem lives on (JS vs UI) and how you measured it.
• Mentioning both platforms (Android back, edge-to-edge, permissions differences) without being asked.
• Knowing what is current (New Architecture only, Hermes, React Native DevTools, Expo with CNG, CodePush retired).
• Separating server state from client state.
• Thinking about old app versions in the wild when designing APIs and releases.

2. Question Bank

2.1 Fundamentals (10)

2.2 Architecture (10)

2.3 Navigation, lists, and data (12)

2.4 Animation and native (9)

2.5 Performance and shipping (9)

3. Predict the Behavior

3.1

function Badge({ count }: { count: number }) {
  return <View>{count && <Text>{count} new</Text>}</View>;
}
<Badge count={0} />

Answer: crash with "Text strings must be rendered within a <Text> component". 0 && ... evaluates to 0, which React renders as a raw string inside a View. Use count > 0 && ....

3.2

<View style={{ flexDirection: 'row' }}>
  <Image source={avatar} style={{ width: 40, height: 40 }} />
  <Text>{veryLongName}</Text>
</View>

Answer: the text overflows off the screen instead of wrapping, because flexShrink defaults to 0 in RN. Add flexShrink: 1 (or flex: 1) to the Text.

3.3

function Screen() {
  useEffect(() => {
    loadData();
  }, []);
  ...
}
// User opens Screen, pushes Details, then goes back.

Answer: loadData runs once. Going back does not remount Screen, because it stayed mounted under Details. Use useFocusEffect to refresh on return.

3.4

Animated.timing(height, { toValue: 200, duration: 300, useNativeDriver: true }).start();

Answer: error: height is not supported by the native animated module. The native driver only supports non-layout properties such as opacity and transform. Use transform: scale, useNativeDriver: false (JS-driven), or Reanimated.

3.5

const offset = useSharedValue(0);
console.log('render');
const onPress = () => { offset.value = withSpring(offset.value + 50); };

Answer: pressing does not log render. Shared value changes update animated styles on the UI thread without re-rendering the component.

3.6

<ScrollView>
  <Header />
  <FlatList data={thousandItems} renderItem={renderItem} />
</ScrollView>

Answer: works but renders all 1000 items and logs a warning about nesting virtualized lists inside plain ScrollViews with the same orientation. The outer ScrollView gives the list unlimited height, so virtualization is lost. Use ListHeaderComponent instead.

3.7

// FlashList row
function Row({ item }) {
  const [expanded, setExpanded] = useState(false);
  ...
}

Answer: after the user expands a row and scrolls, a different item may appear already expanded. FlashList recycles the component instance, so its local state carries over to the new item. Store expansion in data keyed by ID, or reset state when item.id changes.

3.8

const [query, setQuery] = useState('');
const results = useMemo(() => heavyFilter(items, query), [items, query]);
<TextInput value={query} onChangeText={setQuery} />

Answer: typing feels laggy on low-end devices, because every keystroke synchronously re-filters before the input re-renders. Use useDeferredValue(query) for the filter (Fabric supports concurrent rendering), or debounce.

4. Machine Coding Tasks

Typical 60 to 90 minute live tasks, with what to show:

Structure your solution like production code: typed props, small components, a data hook per feature, and a short note on what you would test.

5. Mobile System Design Prompts

Frame every answer with: requirements (offline? real-time? scale?), client architecture, data flow, API contract, caching and persistence, performance, release and monitoring.

See Frontend System Design for the general framework and Server-Driven UI for config-driven screens in RN.

6. Production Scenarios

7. Cheat Sheets

7.1 Which list?

7.2 Which storage?

7.3 Which animation tool?

7.4 Version facts worth knowing

8. Common Mistakes

9. Study Plan