[dawidmatyjasik]

Summary:

FlatList.scrollToItem() does nothing when numColumns is greater than 1. No error or warning is shown, and the list does not scroll.

With numColumns > 1, FlatList gives VirtualizedList one row per index: its getItem returns a new array of up to numColumns items, for example [item4, item5]. FlatList.scrollToItem forwarded the call to VirtualizedList.scrollToItem, which finds the item with:

if (getItem(data, index) === item) {

A row array is never === to a single item, so the item is never found and nothing happens. With one column this works, because getItem returns the item itself.

This change makes FlatList.scrollToItem find the item in data when numColumns > 1, and call scrollToIndex with the index of the row that holds it (Math.floor(index / numColumns)). scrollToIndex and getItemLayout already take row indices for multi-column lists, so this matches the existing behaviour. Single-column lists still go through VirtualizedList.scrollToItem, as before. If the item is not in data, nothing happens, like before.

Changelog:

[GENERAL] [FIXED] - Fix FlatList.scrollToItem doing nothing when numColumns is greater than 1

Test Plan:

Added a Fantom test next to the existing scrollToItem tests in FlatList-itest.js: a 2-column list with rows of 50, calling scrollToItem with DATA[5] (row 2) should dispatch scrollTo to offset 100.

Without the fix:

$ yarn fantom packages/react-native/Libraries/Lists/__tests__/FlatList-itest.js
  ✕ dispatches scrollTo command for the row of an item when numColumns > 1
    - Array [
    -   "Command {type: \"ScrollView\", nativeID: \"flat-list\", name: \"scrollTo, args: [0,100,false]\"}",
    - ]
    + Array []
Tests:       1 failed, 52 passed, 53 total

With the fix:

$ yarn fantom packages/react-native/Libraries/Lists
Test Suites: 3 passed, 3 total
Tests:       76 passed, 76 total

$ yarn jest packages/virtualized-lists
Test Suites: 11 passed, 11 total
Tests:       1 skipped, 202 passed, 203 total

yarn flow-check, ESLint and Prettier pass on the changed files.

I also checked it in RNTester on an iOS 27 simulator (iPhone 17), with this Playground: a FlatList with 60 items, numColumns={2}, getItemLayout, and a button that calls scrollToItem({item: DATA[30], animated: true}). Before the fix, pressing the button does nothing. After the fix, the list scrolls so that item 30 (orange) is at the top.

RNTesterPlayground.js

function Playground() {
  const listRef = useRef<?FlatList<Item>>(null);
  return (
    <View style={styles.container}>
      <Button
        title="scrollToItem(Item 30)"
        onPress={() =>
          listRef.current?.scrollToItem({item: DATA[30], animated: true})
        }
      />
      <FlatList
        ref={listRef}
        data={DATA}
        numColumns={2}
        getItemLayout={(_data, index) => ({
          length: ROW_HEIGHT,
          offset: ROW_HEIGHT * index,
          index,
        })}
        renderItem={({item}) => (
          <View style={[styles.cell, item.key === '30' && styles.target]}>
            <RNTesterText>Item {item.key}</RNTesterText>
          </View>
        )}
      />
    </View>
  );
}

flatlist-scrollToItem-before.mp4

flatlist-scrollToItem-after.mp4

[meta-cla]

Hi @dawidmatyjasik!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[Copilot]

🟢 Approval recommended

The focused fix follows existing row-index semantics, includes regression coverage, and has no identified blocking issues.

No open issues 🎉

What changed in this PR

Fixes FlatList.scrollToItem() for multi-column lists by scrolling to the row containing the requested item.

Changes:

• Converts the matching item’s index to a row index, preserving single-column behavior.
• Adds a Fantom regression test verifying the expected scroll offset.

File	Description
packages/​react-native/​Libraries/​Lists/​FlatList.js	Handles multi-column item lookup and row scrolling.
packages/​react-native/​Libraries/​Lists/​__tests__/​FlatList-itest.js	Tests scrolling to an item in a two-column list.

_{Review effort: Balanced}

[meta-cla]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!