FlatList Performance: Leveraging getItemLayout for Smooth Scrolling

Insight

When a FlatList renders thousands of rows, React Native must measure each item on‑the‑fly to calculate scroll offsets. This extra layout pass can cause jank, especially on older phones. If every row shares a predictable height (or can be derived from the index), you can supply getItemLayout so the list knows exact positions without measuring.

Example

const ITEM_HEIGHT = 80;

const MyList = () => (
  <FlatList
    data={items}
    renderItem={({ item }) => <Item title={item.title} />}
    keyExtractor={item => item.id}
    getItemLayout={(_, index) => ({
      length: ITEM_HEIGHT,
      offset: ITEM_HEIGHT * index,
      index,
    })}
  />
);

The snippet tells the list each row is 80 px tall, allowing instant offset calculation.

Takeaway

Add getItemLayout whenever your rows have a fixed or easily computed height. It removes costly measurements, cuts frame drops, and dramatically improves scroll performance on low‑end devices.