Vertical virtualization of horizontal lists.

[EndyZhou]

Is your feature request related to a problem? Please describe.
Could you provide an example of vertical virtualization for a horizontal list, similar to the UI shown below?

Describe the solution you'd like
A clear and concise description of what you want to happen.

Diagrams and screenshots welcome!

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[Yria]

#158

This is not currently supported and requires either a listview inside a scrollview or a scrollview inside a listview.
Since offsetFromStart only supports scrollview, you should choose one or the other depending on the scroll position when scrolling.

[ksvslk]

How can we solve this? Do you have any pointers?
Looking at the issues of this project, it is a widely wanted feature to have the optimizations also work vertically when scrolling a list of SpatialNavigationVirtualizedLists. From my experience, approximately 30 rows (maybe less) are too many, and the list starts to lag.

[pierpo]

Hey!
It's a very important feature indeed 😭

I have looked into this a bit in the past, but I'm facing a weird bug. You should know that the internals of the list are quite complex, and the simple case virtualized lists were already quite a struggle (until we found a smart solution).
So when it comes to virtualization of virtualization it's getting even more complex. I thought it would work out of the box but it doesn't. There's a strange register/unregister bug happening.

I might have some time to look into this in January, as it will become very important for my project as well.

Even if we solve the bug I'm talking about, there will still be a challenge with saving the current focus position when we mount/unmount lists.

If anyone wants to help with this issue, I could set up a little video call explaining the internals of the library.

I think you might also be able to implement your own custom virtualization component on top of ours.

// Store the virtualization window in a state, like "indices [3, 10] should be shown"

{rows.map((row, index) => {
  <Row shouldBeHidden={shouldHide(virtualizationWindow, index)} data={row} />
})}

There are a few challenges but you can make it work.

• Row should always render a Node, even if shouldBeHidden={false} (otherwise it will mess up the global order of the space navigation, see this pitfall
• Row should also probably render an empty space with the size it would take with elements, so that the space isn't shifted when a row disappears
• You should pass up the index of the currently focused row to the parent so that you can compute the virtualization window

The counter intuitive part is that Rows should not be removed, they should render differently if they are "virtualized-out".
It's fine, because the number of elements might grow but I think that even 100 "empty" components should be fine (I hope).

[ksvslk]

Thank you for the detailed response.
I will try to follow your instructions as soon as possible. I hope someone can join you on making this repo even better - I am ready to test when something is ready :)

[EndyZhou]

Many thanks to @pierpo for the detailed response.

Previously, I attempted to address my issue using:

<SpatialNavigationScrollView>
  // other components
  <View
    style={{
      height: Dimensions.get('window').height,
      overflow: 'hidden',
    }}
  >
    <SpatialNavigationVirtualizedGrid />
  </View>
</SpatialNavigationScrollView>

This approach seemed to work reasonably well. However, as development progressed, I encountered additional challenges and have now opted for a native solution.

[ksvslk]

Many thanks to @pierpo for the detailed response.

Previously, I attempted to address my issue using:

<SpatialNavigationScrollView>
  // other components
  <View
    style={{
      height: Dimensions.get('window').height,
      overflow: 'hidden',
    }}
  >
    <SpatialNavigationVirtualizedGrid />
  </View>
</SpatialNavigationScrollView>

This approach seemed to work reasonably well. However, as development progressed, I encountered additional challenges and have now opted for a native solution.

By native, do you mean only native solution, for example VirtualizedList or a mix of this repo approach + native?

[EndyZhou]

@ksvslk only native

[ksvslk]

@ksvslk only native

OK, cool. But what is the point of this repo then?

[EndyZhou]

This may help you README

[pierpo]

Actually the ideal state of this library would be to... not exist 😂
It was made as a patch on top of missing features with spatial navigation 2 years ago.

Nowadays, the native solution is getting better and better and you might probably be happy with it. The remaining notable advantage of this lib is the 100% cross-platform problem (there's still no "native solution" for web). I think I should clarify this in the README 😊

If you found a proper solution with the native approach, I think it's the best long-term option 😁

Do not worry though, we'll keep working on the library. But if you do not need web support, I'd advise to have a look at the native option 😉

I'm planning to have a fresh look at this vertical virtualization in the beginning of 2025 📆

[ksvslk]

Web support is a must. So helpful repo!