ScrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed

[dieptang]

Hello,

This is nice library. I got error as the title when changing the data source flatlist on the fly when calling to scrollToIndex.

React Native version: System: OS: macOS 13.4 CPU: (8) x64 Apple M1 Memory: 34.63 MB / 8.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 14.18.1 - /usr/local/bin/node Yarn: Not Found npm: 8.19.0 - /usr/local/bin/npm Watchman: Not Found Managers: CocoaPods: 1.11.2 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4 Android SDK: Not Found IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8815526 Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild Languages: Java: 11.0.13 - /usr/bin/javac

Steps To Reproduce

1. First load the screen, I give the data={images} with 5 items, 4 items, then 6 items, then it;s working fine.
2. Then, I give it a big list of data 80 items, and calling to scrollToIndex(index: 35)
3. Throwing an exception as the image.

[dieptang]

Ok, Here is the solution if you build based on FlatList. I changed to FlatList.

`<FlatList

                    getItemLayout={getItemLayout}
                    horizontal
                    directionalLockEnabled
                    pagingEnabled
                    overScrollMode="never"
                    showsVerticalScrollIndicator={false}
                    showsHorizontalScrollIndicator={false}
                    keyboardShouldPersistTaps="always"
                    scrollEnabled={true}
                    onViewableItemsChanged={onIndexChanged}
                    viewabilityConfig={{
                        itemVisiblePercentThreshold: 50
                    }}
                    ref={swiperRef}
                    index={0}
                    data={images}
                    renderItem={({ item, index }) => (
                        <>
                            <Image
                                key={index}
                                style={{ width: width, height: '100%', borderRadius: 5, zIndex: 0 }}
                                resizeMode="contain"
                                source={{ uri: item?.image?.url }}
                            />
                        </>
                    )}
                />`

I added the check on onIndexChanged:

` const onIndexChanged = useCallback(({ viewableItems, changed }) => {

    try {

        if ( typeof viewableItems[0] !== 'undefined' && viewableItems[0] ){

            //do something here.

        }

    } catch (error) {

        console.error(error);

    }

   // console.log("Visible items are", viewableItems[0]);

}, []);`

Hope that's will help.