Academy
easyReact Native#3

FlatList with pull-to-refresh

Prompt

Render a FlatList of 50 items (label "Item #N"). Implement pull-to-refresh that logs "refreshed". Each item should show its index number.

Solution

const data = Array.from({ length: 50 }, (_, i) => ({ key: String(i), label: `Item #${i + 1}` }))
return (
  <FlatList
    data={data}
    refreshing={refreshing}
    onRefresh={() => { setRefreshing(true); setTimeout(() => setRefreshing(false), 1000) }}
    renderItem={({ item }) => <Text style={{ padding: 16 }}>{item.label}</Text>}
  />
)
Mentor's take

FlatList is the answer to a memory problem, not a styling choice: it virtualizes, mounting only a window of rows around the viewport and replacing everything else with correctly-sized blank space. A ScrollView with .map() mounts all 50 native views up front — fine at 50, fatal at 5,000 — so reaching for FlatList by default is the habit interviewers look for.

Pull-to-refresh here is fully controlled: you own the refreshing boolean, the list only reports the gesture via onRefresh. That's why the spinner never dismisses itself — you set refreshing to true when the fetch starts and back to false when it settles. In production the setTimeout becomes an async refetch with the reset in a finally block, so a failed request doesn't leave the spinner stuck forever.

Item identity comes from the key field on each datum (or a keyExtractor); stable keys are what let the virtualization window slide without remounting rows.

Red flag: rendering long lists with ScrollView + .map(), or forgetting to reset refreshing on fetch failure — both signal you haven't shipped a list screen.

Say it: "FlatList virtualizes so only a window of rows is ever mounted, and pull-to-refresh is a controlled pattern — I own the refreshing flag and always reset it in finally."