android – react-native sectionList is all the time scrolling to first part if merchandise index 0 no matter part index: X

I’m utilizing a SectionList in React Native to show a number of sections with a number of objects in every part. I’m programmatically scrolling to particular sections and objects utilizing the scrollToLocation methodology.

The problem I’m dealing with is that if I try and scroll to an merchandise with an itemIndex of 0, the SectionList all the time scrolls to the primary merchandise of the primary part, whatever the sectionIndex I present. If the itemIndex is larger than 0, the scrolling works as anticipated and goes to the proper part and merchandise. The problem is going on in iOS. Here is a simplified code to breed the problem:

import React, { useRef } from "react";
import { SectionList, View, Textual content, Button, StyleSheet, StatusBar } from "react-native";

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

    const sections = Array.from({ size: 10 }, (_, sectionIndex) => ({
        title: `Part ${sectionIndex + 1}`,
        knowledge: Array.from({ size: 30 }, (_, itemIndex) => `Merchandise ${sectionIndex + 1}.${itemIndex + 1}`),
    }));

    // Scroll to the primary merchandise of the primary part
    const scrollToFirstSection = () => {
        sectionListRef.present?.scrollToLocation({
            sectionIndex: 0,
            itemIndex: 0,
            viewPosition: 0.5, // Heart the merchandise within the view
        });
    };

    // Scroll to the primary merchandise of the 4th part
    const scrollToSecondSection = () => {
        sectionListRef.present?.scrollToLocation({
            sectionIndex: 3,
            itemIndex: 0,
            viewPosition: 0.5, // Heart the merchandise within the view
        });
    };

    return (
        
            
                
                
            
             merchandise + index}
                renderItem={({ merchandise }) => (
                    
                        {merchandise}
                    
                )}
                renderSectionHeader={({ part }) => (
                    
                        {part.title}
                    
                )}
            />
        
    );
};

const types = StyleSheet.create({
    container: {
        flex: 1,
        padding: 10,
        paddingTop:50
    },
    buttonsContainer: {
        flexDirection: "row",
        justifyContent: "space-between",
        marginBottom: 10,
    },
    merchandise: {
        padding: 15,
        backgroundColor: "#f9f9f9",
        borderBottomWidth: 1,
        borderBottomColor: "#ddd",
    },
    header: {
        padding: 10,
        backgroundColor: "#e0e0e0",
    },
    headerText: {
        fontWeight: "daring",
    },
});

export default App;

It may very well be examined in expo-snack as nicely.