bamlab / bamlab/react-tv-space-navigation
Title: Feature Request: Support for Center Focus / Stick-to-Center in SpatialNavigationVirtualizedList
- Dominant language
- TypeScript
- Stars
- 319
- Forks
- 46
- PR merge metrics
- No merged PRs in 30d
Description
Description
Hi team,
I'm working on a TV app using React TV Spatial Navigation, and I want to achieve a center-focused scrolling behavior—similar to Apple TV, Fire TV, and Android TV home screens, where the focused item always stays centered while navigating horizontally
Currently, my implementation looks like this:
` const getScrollBehavior = () => {
const index = flatListRef?.current?.currentlyFocusedItemIndex ?? 0;
updatePadding(index)
// 0 & 1 stay left
if (index === 0 || index === 1 || index === data?.length) {
return "stick-to-end";
}
// 2 and onwards should stay centered
return "stick-to-start";
};`
`
`
Request
Is there any built-in way to stick the focused item to the center of the viewport?
Example behavior I'm trying to achieve:
When navigating with D-pad left/right, the focused item remains in the center of the list container.
The list scrolls smoothly behind the focused item.
Only the first/last few items are allowed to move away from center.
Additional Details
I attempted manually adjusting paddingLeft, scrollToIndex, and customizing scrollBehavior, but the movement is not smooth or consistent.
If this feature isn't available yet, can you suggest the best approach to implement it? Or could this be considered as a new feature for future releases?
Environment
Platform: React Native TV
Spatial Navigation library version: (your version)
Device/Platform: (e.g., Fire TV, Android TV, LG webOS, etc.)
Expected Behavior (GIF/Description)
Focused item should remain centered similar to:
Fire TV “Apps” row
Android TV home screen
Netflix / Prime Video horizontal carousels
Contributor guide
No contributing guide indexed for this repository
Research direction
Start at SpatialNavigationVirtualizedList and inspect the existing scrollBehavior handling, along with the itemSize, orientation, and scrolling props shown in the example. Define how center-focused navigation should behave at the first and last items, then verify that horizontal D-pad navigation keeps middle items centered and scrolls smoothly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100