bamlab / bamlab/react-tv-space-navigation

Question/bug: Are nested SpatialNavigationVirtualizedList (vertical parent + horizontal rails) supported? scrollBehavior breaks and virtualization collapses at scale

Open
#214 11 comments 1 reaction 0 assignees View on GitHub
Priority:High
Dominant language
TypeScript
Stars
319
Forks
46
PR merge metrics
No merged PRs in 30d

Description

**Describe the bug**
When nesting SpatialNavigationVirtualizedList (SNVL) — a vertical parent with horizontal SNVL rails as children — the horizontal scrollBehavior='stick-to-start' becomes inconsistent (doesn’t snap/stick reliably), and performance degrades as the screen adds more rails/items (focus lag after a few moves, virtualization seems less effective).

**To Reproduce**
```
import React, { memo, useMemo } from 'react'
import { Text, View } from 'react-native'
import {
DefaultFocus,
SpatialNavigationFocusableView,
SpatialNavigationNode,
SpatialNavigationRoot,
SpatialNavigationVirtualizedList,
} from 'react-tv-space-navigation'

const rails = new Array(4).fill(0).map((_, r) => ({
id: `rail-${r}`,
items: new Array(10).fill(0).map((__, i) => ({ id: `r${r}-i${i}` })),
}))

const ROW_HEIGHT = 220
const TILE_W = 120
const GAP = 16
const ITEM_SIZE = TILE_W + GAP

export const Test = () => {
const data = useMemo(() => rails, [])

return (


(
// CHILD: horizontal SNVL per row
(



)}
/>
)}
/>


)
}

const Tile = memo(
({ id, width, height }: { id: string; width: number; height: number }) => {
const Wrapper = id === 'rail-0' ? DefaultFocus : View
return (


{({ isFocused }) => (


{id}


)}


)
},
)
```

***Observed behavior***

Holding RIGHT/LEFT within a horizontal rail: after a few items, snapping to “start” doesn't work.

As more rails/items are added, overall responsiveness drops and focus moves become laggy (virtualization seems to keep more mounted than expected) - testing in release modes.

***Expected behavior***

- With vertical SNVL parent + horizontal SNVL children, scrollBehavior='stick-to-start' should remain reliable in each horizontal rail.
- LEFT/RIGHT within a rail and UP/DOWN between rails should be smooth.
- Virtualization should remain effective (only a small window mounted) as rails/items scale.

Library version: 5.2.0
React Native version: 0.77.0

***Additional context***

I followed the Pitfalls & Troubleshooting doc: every item is always wrapped in a SpatialNavigationNode / SpatialNavigationFocusableView (no conditional mounting); only inner content changes.

This issue appears specifically when the vertical container is SNVL; with a vertical SpatialNavigationScrollView, snapping is correct but performance doesn’t scale since everything stays mounted.

***Questions:***

- Is SNVL→SNVL nesting (vertical parent + horizontal children) officially supported?
- If yes, are there recommended props/patterns to keep scrollBehavior and virtualization stable at scale?
- If not recommended, what’s the preferred pattern for large datasets?

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the provided Test reproduction using nested vertical and horizontal SpatialNavigationVirtualizedList components, then compare it with the vertical SpatialNavigationScrollView case. Check how scrollBehavior='stick-to-start', focus movement, and mounted-item counts behave as rails and items increase. Done means the supported nesting pattern and required props are established, or the reported snapping and virtualization behavior is reproduced and fixed.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile-dev, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.