Infinite scroll appending first item after the last item (infinite circular scroll)

[nabinkumarn]

Hi, I want to achieve a behavior of infinite scroll with an array of data. After last item, first item should repeat on right side. On left side, if first item is selected, scroll is disabled to left but user can continue to scroll in loop in right side.

For this, I have tried to use onEndReached, appending data to array of previous data and it is working but issue will array will grow and cause performance issue, so tried to remove starting items before adding to end.
const handleEndReached = useCallback(() => { if (data?.contentList?.length > 0) { setContentList((prevList) => { const originalLength = originalContentLength.current; const newContent = [...data.contentList]; let updatedList = [...prevList, ...newContent]; const itemsToRemove = updatedList.length - maxLength; updatedList = updatedList.slice(itemsToRemove); return updatedList; }); } }, [data.contentList, setSelectedIndex]);

<SpatialNavigationVirtualizedList ref={listRef} style={styles.scrollView} data={contentList} renderItem={renderItem} itemSize={getItemSize} orientation={'horizontal'} scrollBehavior={'stick-to-start'} scrollDuration={400} additionalItemsRendered={10} onEndReached={handleEndReached} onEndReachedThresholdItemsNumber={5} getItemLayout={getItemLayout} />

Once I do this, I am not able to scroll and focus position is messed,

Has anyone tried to create like this? Can you suggest me how we can achieve this behavior with this package.
Any example code would help

[pierpo]

Hi @nabinkumarn! Sorry I took so long to answer you.

It's a very interesting question, but I'm not sure about the implementation. I think your approach of making the list grow is the best one, and I'm not sure you should worry about the performance. Virtualization works very well for huge lists, because browsing an array in JS is very efficient. The slow part of it all is the rendering, but since these hundreds/thousands of elements are not rendered, it should work fine 😁

We thought about it at Theodo/BAM and did not manage to come to a valid solution.

The problem with making the list grow is that if you're going back, you'll have the same issue. But I can't think of a way to make a true infinite carousel work for now 🤔 (working on both sides)

[robmim]

You can easily acheive infinite scroll using the useKey hook that @pierpo created in the sample project. Create a ref for every item of the list and validate if the first or the last items is focused and focusing the first or the last item based on the direction the user press on the remote.

If you need help i can show you some sample code