SectionList scrollToLocation does not scroll to the correct position

Description

When a SectionList contains a large number of items, calling scrollToLocation
scrolls to a slightly incorrect position, even though getItemLayout is properly provided.

Instead of scrolling exactly to the specified item, the list stops a bit offset from the expected location.

If this behavior is expected or if my usage of SectionList / getItemLayout is incorrect,
I would appreciate any guidance on the correct approach.

import React, { useRef, useMemo } from 'react';
import { SectionList, Text, View, Button } from 'react-native';

const HEADER_HEIGHT = 40;
const ITEM_HEIGHT = 30;

const TARGET_SECTION_INDEX = 20;

const generateSections = () => {
  const createItems = (prefix) => {
    const count = 20 + Math.floor(Math.random() * 100);
    return [...Array(count)].map((_, i) => ({
      label: `${prefix} Item ${i + 1}`,
    }));
  };

  return [...Array(24)].map((_, sectionIndex) => ({
    title: `Section ${sectionIndex + 1}`,
    data: createItems(`Section ${sectionIndex + 1}`),
  }));
};

export default function App() {
  const sectionListRef = useRef(null);
  const sections = useMemo(() => generateSections(), []);

  const scrollToSection = () => {
    if (sectionListRef.current) {
      sectionListRef.current.scrollToLocation({
        sectionIndex: TARGET_SECTION_INDEX,
        itemIndex: 0,
        viewPosition: 0,
      });
    }
  };

  return (
    <View style={{ flex: 1, paddingTop: 40 }}>
      <Button
        title={`Scroll to Section ${TARGET_SECTION_INDEX + 1}`}
        onPress={scrollToSection}
      />
      <SectionList
        ref={sectionListRef}
        sections={sections}
        keyExtractor={(item, index) => item.label + index}
        renderItem={({ item }) => (
          <View
            style={{
              height: ITEM_HEIGHT,
              justifyContent: 'center',
              borderBottomWidth: 1,
              borderColor: '#ccc',
            }}>
            <Text>{item.label}</Text>
          </View>
        )}
        renderSectionHeader={({ section: { title } }) => (
          <View
            style={{
              justifyContent: 'center',
              height: HEADER_HEIGHT,
              backgroundColor: '#eee',
            }}>
            <Text
              style={{
                fontWeight: 'bold',
              }}>
              {title}
            </Text>
          </View>
        )}
        getItemLayout={(_, index) => ({
          index,
          length: ITEM_HEIGHT,
          offset: ITEM_HEIGHT * index,
        })}
      />
    </View>
  );
}

Steps to reproduce

1. Render a SectionList
2. Call scrollToLocation with a valid sectionIndex and itemIndex
3. Observe the scroll position

React Native Version

0.81.4

Affected Platforms

Other (please specify), Runtime - Android

Output of npx @react-native-community/cli info

skip

Stacktrace or Logs

nothing

MANDATORY Reproducer

https://snack.expo.dev/@kuroppi/sectionlist-scrolltolocation

Screenshots and Videos

expected:

actual:

Chạy reproducer Snack được liên kết trên Android và so sánh SectionList.scrollToLocation với hành vi getItemLayout được cung cấp. Bắt đầu bằng cách lần theo điểm vào SectionList scrollToLocation và cách xử lý sectionIndex và itemIndex. Hoàn thành nghĩa là section và item được yêu cầu đạt đến vị trí mong đợi trong các danh sách lớn.