sectionList is always scrolling to first section if item index 0 regardless of section index: X

[anasyarn]

Description

I am using a SectionList in React Native to display multiple sections with multiple items in each section. I am programmatically scrolling to specific sections and items using the scrollToLocation method.

The issue I am facing is that if I attempt to scroll to an item with an itemIndex of 0, the SectionList always scrolls to the first item of the first section, regardless of the sectionIndex I provide. If the itemIndex is greater than 0, the scrolling works as expected and goes to the correct section and item. The issue is happening in iOS. I have tested it against latest stable version of react-native (0.76.3) as well, which has same issue. Here's a simplified code to reproduce the issue:

Steps to reproduce

Run following code and try to scroll by pressing buttons. Note that the issue i found in iOS only.

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

const App = () => {
  const sectionListRef = useRef<SectionList>(null);

  const sections = Array.from({length: 10}, (_, sectionIndex) => ({
    title: `Section ${sectionIndex + 1}`,
    data: Array.from(
      {length: 30},
      (_, itemIndex) => `Item ${sectionIndex + 1}.${itemIndex + 1}`,
    ),
  }));

  // Scroll to the first item of the first section
  const scrollToFirstSection = () => {
    sectionListRef.current?.scrollToLocation({
      sectionIndex: 0,
      itemIndex: 0,
      viewPosition: 0.5, // Center the item in the view
    });
  };

  // Scroll to the first item of the fourth section
  const scrollToSecondSection = () => {
    sectionListRef.current?.scrollToLocation({
      sectionIndex: 3,
      itemIndex: 0,
      viewPosition: 0.5, // Center the item in the view
    });
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonsContainer}>
        <Button title="Sec: 1 item: 0" onPress={scrollToFirstSection} />
        <Button title="Sec: 4 item: 0" onPress={scrollToSecondSection} />
      </View>
      <SectionList
        ref={sectionListRef}
        sections={sections}
        keyExtractor={(item, index) => item + index}
        renderItem={({item}) => (
          <View style={styles.item}>
            <Text>{item}</Text>
          </View>
        )}
        renderSectionHeader={({section}) => (
          <View style={styles.header}>
            <Text style={styles.headerText}>{section.title}</Text>
          </View>
        )}
        onScrollToIndexFailed={() => {}}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    paddingTop: StatusBar.currentHeight || 60,
  },
  buttonsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10,
  },
  item: {
    padding: 15,
    backgroundColor: '#f9f9f9',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
  header: {
    padding: 10,
    backgroundColor: '#e0e0e0',
  },
  headerText: {
    fontWeight: 'bold',
  },
});

export default App;

React Native Version

0.76.3

Affected Platforms

Runtime - iOS

Output of npx react-native info

text
System:
  OS: macOS 14.6.1
  CPU: (8) arm64 Apple M1 Pro
  Memory: 143.67 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.9.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.8.3
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.10.07.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/ibeneanas/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.19072.14.2412.12360217
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 2.7.5
    path: /Users/ibeneanas/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.3
    wanted: 0.76.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

Bridgeless mode is enabled
Unbalanced calls start/end for tag 20
Unbalanced calls start/end for tag 19
Running "sectionList" with {"rootTag":1,"initialProps":{"concurrentRoot":true},"fabric":true}

Reproducer

https://snack.expo.dev/@anasyarn/sectionlist-example

Screenshots and Videos

Screen.Recording.2024-12-01.at.8.mp4

[react-native-bot]

Warning

Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[react-native-bot]

Warning

Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.