bamlab / bamlab/react-tv-space-navigation

Focus jumps after screen navigation when using SpatialNavigationRoot — breaks without it due to VirtualizedList dependency

Open
#195 3 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.