bamlab / bamlab/react-tv-space-navigation

Title: Feature Request: Support for Center Focus / Stick-to-Center in SpatialNavigationVirtualizedList

Open
#226 0 comments 1 reaction 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.