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"; };
<SpatialNavigationVirtualizedList ref={flatListRef} orientation="horizontal" data={data} renderItem={renderItem} itemSize={ITEMSIZE} onEndReachedThresholdItemsNumber={3} onEndReached={onEndReached} scrollDuration={SCROLLDURATION} scrollInterval={SCROLLINTERVAL} scrollBehavior={getScrollBehavior()} />
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
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"; };<SpatialNavigationVirtualizedList ref={flatListRef} orientation="horizontal" data={data} renderItem={renderItem} itemSize={ITEMSIZE} onEndReachedThresholdItemsNumber={3} onEndReached={onEndReached} scrollDuration={SCROLLDURATION} scrollInterval={SCROLLINTERVAL} scrollBehavior={getScrollBehavior()} />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