Can I put a VirtualizedList inside a VirtualizedList?

[Yria]

If you use a virtualizedList inside a virtualizedList, only one or the other will scroll.

example)

<SpatialNavigationVirtualizedList
	data={[mock, mock, mock, mock, mock, mock, mock, mock]}
	orientation={'vertical'}
	renderItem={({ item }) => (
	    <SpatialNavigationVirtualizedList data={item} orientation="horizontal">
	        {({ item }) => (
	            <Program src={item} />
	        )}
	    </Section>
	)}
	itemSize={scaledPixels(250)}
	numberOfRenderedItems={6 + 2}
	numberOfItemsVisibleOnScreen={6}
scrollBehavior="stick-to-start"
 />

When used as above, vertical scrolling works fine, but horizontal scrolling does not.

The horizontal list is drawn as it appears on the screen, but the vertical list is not.

In example, you are using scrollview for the vertical and listview for the horizontal, but this does not draw what is visible on the screen.

[pierpo]

Hey @Yria!
Indeed, this should work... but it doesn't. It needs investigation, but it's quite a tricky one.

However, I think the performance will be quite bad anyway. Since on each scroll we mount/unmount an element (with recycling in the case of simple lists), then scrolling through a virtualized list of virtualized lists means you will mount/unmount a whole list everytime you scroll through the parent one.

Still, it's not normal that it doesn't work. We were aware of this, but we didn't track it indeed.

Thank you for reporting it!