↗
↗
↗
↗
☰
SpatialNavigationScrollView
iOS
Android
Web
TV
A scroll container that cooperates with spatial focus movement so remote, keyboard, and pointer users can keep focused items visible.
Import
tsx
Copy
import
{
SpatialNavigationScrollView
}
from
'react-native-cross-elements'
;
Preview
Preview
Code
spatial-navigation-scroll-view.tsx
Focused rows stay visible
Works with vertical menus
Useful for TV surfaces
Usage
tsx
Copy
import
{
SpatialNavigationScrollView
}
from
'react-native-cross-elements'
;
<
SpatialNavigationScrollView
>
<
SpatialNavigationView
direction
=
"vertical"
>
{
items
.
map
(
(
item
)
=
>
(
<
SpatialNavigationFocusableView
key
=
{
item
.
id
}
>
{
(
{
isFocused
}
)
=
>
<
Row
focused
=
{
isFocused
}
>
{
item
.
title
}
<
/
Row
>
}
<
/
SpatialNavigationFocusableView
>
)
)
}
<
/
SpatialNavigationView
>
<
/
SpatialNavigationScrollView
>
Tip
✨
Wrap long spatial menus in SpatialNavigationScrollView instead of a plain ScrollView.