ReactNative FlatList scrollToIndex issue

Question

I have the following pieces of code in my App.js:

1. the ref for the main FlatList is set in a useEffect hook as flatListRef

const [flatListRef, setFlatListRef] = useState(null);
...
useEffect(() => {
    let mounted = true;
    if (refSlides?.current && mounted) setFlatListRef(refSlides.current);
    return () => mounted = false;
}, []);

2. the renderItem function that renders the desired component as an item of the FlatList

const renderItem = ({item, index, separators}) => {
    return (
        <View style={{
            flexGrow: 1,
            width,
            height
        }}>
            {
                item.component === 'Welcome' && <Welcome/>
                || item.component === 'Hospital' &&
                <Hospital
                    flatListRef={flatListRef}
                    history={navHistory}
                    slides={slides}
                    setSlides={setSlides}
                    slide={item}/>
                || item.component === 'Snippets' &&
                <Snippets
                    flatListRef={flatListRef}
                    history={navHistory}
                    slides={slides}
                    setSlides={setSlides}
                    slide={item}
                />
                || item.component === 'Disease' &&
                <Disease
                    flatListRef={flatListRef}
                    history={navHistory}
                    slides={slides}
                    setSlides={setSlides}
                    slide={item}
                />
            }
        </View>
    );
};

3. the actual FlatList definition

<FlatList
    data={slides}
    ref={refSlides}
    keyExtractor={item => item.key.toString()}
    renderItem={renderItem}
    getItemLayout={(data, index) => {
        return {
            length: width,
            offset: width * index,
            index
        };
    }}
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    pagingEnabled={true}
/>

I have the following piece of code in any of my Welcome, Hospital, Snippets, Disease components. For example:

<TouchableOpacity
    activeOpacity={0.8}
    onPress={() => {
        setSlides([...slides, {
            key: uuidC.v4(),
            index: slides.length,
            uuid: item.uuid,
            component: 'Hospital'
        }]);
        flatListRef.scrollToIndex({index: slides.length - 1}); // <===== HERE IS THE PROBLEM
    }}>
    ...
</TouchableOpacity>

I have a main FlatList that has 2 components at the start, the Welcome component at index 0 and the Hospital component at index 1. In the Hospital component i have buttons, that when they are pressed, add another item (Hospital, Disease, Snippets) to the FlatList. The items are added successfully, i can manually slide to them.

The problem appears when i try to auto-scroll to the last item added. I want the following behaviour: after the button is pressed, a new item is added to the FlatList and auto-scrolls to it. Also i want to scroll at any index in the current FlatList.

The error i get is: scrollToIndex out of range: requested index 2 but maximum is 1.

Why does it say that maximum is 1 when i see with my eyes at least 3 items in the FlatList.

Have been at this for 2 days now, didn't find anything of use. Also i had not found examples where items where added or removed from FlatLists in conjunction with the scrollToIndex usage. Tried using VirtualizedLists, same problem as FlatList. I suspect it's a ref problem. I don't understand why the FlatList does not update the length of the data it renders, so i can scroll to it.

Any suggestions are appreciated.

Answer 1

Update flatListRef.scrollToIndex({index: I18nManager.isRTL ? array.length - index - 1 : index}); Where index is from Flatlist renderItem