SpatialNavigationScrollView have the option to only scroll when next element is not in view/fully visible.

[connor-iversoft]

Is your feature request related to a problem? Please describe.
Currently when using a spatialNavigationScrollView, it always scrolls the view when going to the next focused node. While not a problem, it would be nice to have the option to only scroll when the newly focused element is not in view.

Describe the solution you'd like
Some sort of flag, or even a more detailed option to control how the scroll view behaves while the user is navigating between nodes. I am open to any type of api implementation.

The screenshot below shows the behaviour we would like to create.

[pierpo]

Hello, I am not 100% sure I understood you problem but do you mean to change the scroll behaviour?

We have one called jump-on-scroll, which might solve your issue?
It's not present in the example (which is probably a mistake for discoverability)!

[connor-iversoft]

Hey @pierpo, sorry about the confusion earlier. I've seen that option with the virtualized lists, but it doesn't seem to be available with the SpatialNavigationScrollView. Looking at the type definition of SpatialNavigationScrollView Props, here are the options I found:

horizontal, style, offsetFromStart, children, ascendingArrow, ascendingArrowContainerStyle, descendingArrow, descendingArrowContainerStyle, pointerScrollSpeed

We're attempting to make the SpatialNavigationScrollView scroll only when it's necessary. using the screenshot from my original post as an example:

As the user navigates among the first 7 items, the scroll view won't actually scroll because the focus keeps shifting between items that are fully visible on screen. But, when the user moves to the 8th item, which isn't fully visible, The scroll view should scroll to put the newly focused item is fully visible on the screen.

Another good example would be the carousels in plex. In plex, the carousels don't scroll until focus is in the centre and continues to scroll keeping the next item in the centre.

Here's a video showing the behavior we're trying to recreate, which we've already achieved in React.

MuppetsScrollBehaviour480p.mov

Thanks again for your assistance. This library has been awesome! 👌

[pierpo]

Hey @connor-iversoft!

So, one way to achieve this in a similar way is behaviour stick-to-end on a virtualized list.
But unfortunately we don't support the fact that when we come back, the behaviour becomes stick-to-start. The behaviour is completely symmetrical: scrolling of the window depends exclusively on the focused element, so it will be the same while scrolling left or scrolling right 🤷 It can be done but it's some work on our side.
(I don't know if what I'm saying is clear, as I use the lib's nomenclature)

About the fact that it scrolls when the element is half visible, I think this is achievable with the virtualized list using the proper parameters 🤔
Play around with the items visible on screen etc. and it should look similar 😁

[connor-iversoft]

Thanks for the detailed reply! I'll play around with what you mentioned. Thanks!