bamlab / bamlab/react-tv-space-navigation
Focus jumps after screen navigation when using SpatialNavigationRoot — breaks without it due to VirtualizedList dependency
- Dominant language
- TypeScript
- Stars
- 319
- Forks
- 46
- PR merge metrics
- No merged PRs in 30d
Description
Hi team
I'm using react-tv-space-navigation in my React TV project, and I’ve run into a focus issue when navigating between screens.
Problem Description
I wrap each screen/page with its own . When I navigate from one screen to another, the initial focus looks correct. However, as soon as I press a direction key (like Down or Right), the focus jumps to an incorrect item.
For example:
On Screen A, I navigate to Screen B.
On Screen B, the first focus is on item-1 as expected.
But when I press the Down button, it jumps directly to item-3, skipping item-2.
It feels like the navigation tree isn't fully resetting, or maybe previous focus history is interfering
Expected Behavior::
When navigating to a new screen:
The focus should be reset cleanly.
Directional focus should move linearly (e.g., item 1 → item 2 → item 3).
Steps to Reproduce
Use on each screen.
Navigate from one screen to another.
Set initial focus using autoFocus or defaultFocus.
Press the Down/Right key.
Focus skips the next logical item.
and i am using same example code like
{
// Handle reaching the end of the list
// you might trigger your backend pagination for example
}}
style={styles.container}
orientation="horizontal"
/>
// ScreenA.tsx
navigate("ScreenB")} />
// ScreenB.tsx
Workaround:
As a test, I commented out from the screen component.
Result:
The jumping issue goes away, and focus behaves as expected across screens.
BUT it throws an error: SpatialNavigationVirtualizedList must be used inside a SpatialNavigationRoot like this
So I'm stuck between:
Jumping focus when the root is present
Runtime error when the root is removed
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the transition between the ScreenA and ScreenB examples with SpatialNavigationRoot, autoFocus or defaultFocus, and SpatialNavigationVirtualizedList. Inspect the focus behavior around the root and virtualized-list usage, then verify that removing the root is no longer required, directional navigation moves from item-1 to item-2 to item-3, and the list does not raise its inside-root error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100