bamlab / bamlab/react-tv-space-navigation

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

Open
#193 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
319
Forks
46
PR merge metrics
No merged PRs in 30d

Description

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]);`

``

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

Contributor guide

No contributing guide indexed for this repository

Research direction

The entry point mentioned is SpatialNavigationVirtualizedList; start by tracing its onEndReached, data, focus, and layout behavior. Reproduce the reported case with a bounded contentList and verify that scrolling continues circularly without focus-position corruption or unbounded array growth.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.