bamlab / bamlab/react-tv-space-navigation
Infinite scroll appending first item after the last item (infinite circular scroll)
- 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