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

[dheenavk]

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

<SpatialNavigationVirtualizedList
// Do not forget to memoize data
data={data}
renderItem={renderItem}
// Do not forget to memoize this if you provide it as a function
itemSize={50}
numberOfRenderedItems={10}
numberOfItemsVisibleOnScreen={5}
onEndReached={() => {
// Handle reaching the end of the list
// you might trigger your backend pagination for example
}}
style={styles.container}
orientation="horizontal"
/>

// ScreenA.tsx

<Focusable onEnterPress={() => 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

[robmim]

You need to make sure EVERY focusable elements are wrapped in a SpatialNavigationNode ou SpatialNavigationFocusableView to make sure the tree render properly as explain in the api doc.

https://github.com/bamlab/react-tv-space-navigation/blob/main/docs/pitfalls.md

[dinakaran0602]

Hi, thanks again for your continued support.

I wanted to provide a more detailed explanation of the issue I’m facing.

I'm using SpatialNavigationRoot inside each screen (ScreenA, ScreenB) and conditionally enabling it with isActive={isFocused} based on the current screen's focus using React Navigation.

What’s Working:

Navigation from ScreenA to ScreenB works fine — focus behaves correctly on mount.

Each screen uses the same structure with:

SpatialNavigationRoot

SpatialNavigationNode

SpatialNavigationVirtualizedList

Issues Observed:

1. Back Navigation Focus Jumps Twice
   When navigating back from ScreenB to ScreenA, the focus jumps two times unexpectedly.

This creates a flickering or snapping effect, which looks glitchy and isn't expected.

2. ScreenB Movement Affects ScreenA (Background Scroll Bug)
   While on ScreenB, when I scroll or navigate inside SpatialNavigationVirtualizedList, the background content of ScreenA (which is supposed to be unmounted or inactive) also scrolls/moves at the same time.

It feels like both screens are responding to navigation simultaneously, which causes a weird overlapping focus and scroll behavior.

Suspected Root Cause (Possibly):
Even though I’m using isActive={isFocused} inside SpatialNavigationRoot, it seems like the focus tree of the previous screen is still partially active or not fully unmounted.

As a result:

Navigation commands affect both screens.

The back navigation triggers double focus events or layout updates.

Expectation:

When navigating to a new screen, only that screen’s focus tree should be active.

The previous screen should be completely detached from focus handling and not respond to directional events or scrolling.

On back navigation, the focus should resume naturally to the previous position on ScreenA without extra jumps.

Questions:
Should I avoid wrapping every screen with its own SpatialNavigationRoot?

Is there a better way to isolate focus between screens using React Navigation without these side effects?

Is it possible the focus tree from ScreenA remains "alive" in memory when ScreenB is mounted, even with isActive={isFocused}?

Please let me know if a specific pattern or cleanup method is required to avoid this overlap.

Thanks in advance for your help — and for the great work on this library!

this is my code

ROot wrapper

const onDirectionHandledWithoutMovement = useCallback(
(movement: Direction) => {
if (movement === "left" && !Back_Components.includes(currentRoute)) {
toggleMenu(true);
}
},
[toggleMenu, isMenuOpen]
);

return (
<SpatialNavigationRoot
isActive={isFocused && !isMenuOpen}
onDirectionHandledWithoutMovement={onDirectionHandledWithoutMovement}

{children}

);

Screen1 :

Screen2:

[pierpo]

Hey @dinakaran0602 😁 It feels like what you did makes sense, and you did pin point the problem. Can you compare what you've done with the working example?
You're trying to achieve the most common use case and it is already covered by the example, so you can just browse the code and see what you missed out 😊

It's running here and the code lives here!