Scrolltolocation issue in sectionlist

[sankar9659]

Description

I m using react native section list to show sections of data, I've to scroll to a particular section while pressing a button. But facing some issues like, Cannot read the property 'data' of undefined, js engine: herms in scrolltolocation functionality. Even I have gave the enough data to scroll in sectionlist. I have attached the code. And attached the screenshot below

Version

0.67.3

Output of npx react-native info

System: OS: Windows 10 10.0.19044 CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz Memory: 967.80 MB / 15.79 GB Binaries: Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: AllowDevelopmentWithoutDevLicense: Enabled IDEs: Android Studio: Not Found Visual Studio: Not Found Languages: Java: 11.0.14 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.67.3 => 0.67.3 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

When I click a button to scrollto the particular location faced issue,

Snack, code example, screenshot, or link to a repository

const SessionCardList = ({ data, viewType, isPoster, activeTabScreen, user, initialTabIndex, tabIndex, navigation, lastDayVisited, ...props }) => {
    const { id } = data
    const tabRef = useRef({})
    const Item = ({ data, index, isLast, isPoster = false }) => {
        return (
            <View style={[{ marginBottom: isLast ? 15 : 0 }]} key={`item_session_${data._id}`}>
                {<Card index={index} item={data} key={`item_card_${data._id}_card`} full navigation={navigation} config={props.activeConference} user={user} type={viewType} isPoster={isPoster} activeTabScreen={activeTabScreen.current} />}
            </View>
        );
    }

    setTimeout(() => {
        if (initialTabIndex === tabIndex.current) {
            tabRef?.current?.scrollToLocation(
                {
                    animated: true,
                    sectionIndex: 3,
                    itemIndex: 1,
                    viewOffset: 0.5,
                }
            );
        }
    }, 500);

    reactotron.log({ "render session card": "" });

    return <>
        <SectionList
            sections={data}
            keyExtractor={(item, index) => index}
            ref={tabRef}
            renderItem={({ item, index }) => {
                return (<Item title={item.title} data={item} index={index} />)
            }}
            renderSectionHeader={({ section, index }) => {
                return (
                    <View style={[localStyle.listHeader, localStyle.primaryBackgroundColor]}>
                        <Text style={localStyle.listHeaderText}>{section.title}</Text>
                    </View>
                )
            }}
            stickySectionHeadersEnabled={true}
            key={'SectionList' + id}
            initialNumToRender={5}
            onScrollToIndexFailed={(err) => {
                const wait = new Promise(resolve => setTimeout(resolve, 600));
                wait.then(() => {
                    if (initialTabIndex === tabIndex.current) {
                        tabRef?.current?.scrollToLocation(
                            {
                                animated: true,
                                sectionIndex: 3,
                                 itemIndex: 1,
                                viewOffset: 0.5,
                            }
                        );
                    }
                });
            }}
        />
    </>
}

export default memo(SessionCardList);

[revanli]

Hi @sankar9659 . I face same problem, I found SectionList Component use props.sections[i].data in scrollToLocation method. if the props.sections is undefined, It may cause this problem. So I solved by add a if condition.

const hasData = data[sectionIndex]?.data

if (hasData) {
   // scrollToLocation
}

Hope it can help!

source code // VirtualizedSectionList.js

[fukemy]

@sankar9659 did u solved this?