↗
↗
↗
↗
☰
SpatialNavigationNode
iOS
Android
Web
TV
The low-level focus registration primitive. Use it when you need direct control over focus lifecycle, select events, and imperative focus refs.
Import
tsx
Copy
import
{
SpatialNavigationNode
,
type
SpatialNavigationNodeRef
}
from
'react-native-cross-elements'
;
Preview
Preview
Code
spatial-navigation-node.tsx
Focusable node
State: Idle
Usage
tsx
Copy
const
nodeRef
=
React
.
useRef
<
SpatialNavigationNodeRef
>
(
null
)
;
<
SpatialNavigationNode
ref
=
{
nodeRef
}
onFocus
=
{
(
)
=
>
console
.
log
(
'focused'
)
}
onBlur
=
{
(
)
=
>
console
.
log
(
'blurred'
)
}
onSelect
=
{
(
)
=
>
console
.
log
(
'selected'
)
}
>
{
(
{
isFocused
}
)
=
>
<
Card
focused
=
{
isFocused
}
/
>
}
<
/
SpatialNavigationNode
>
;
nodeRef
.
current
?
.
focus
(
)
;
Tip
✨
Most UIs can use SpatialNavigationFocusableView. Use SpatialNavigationNode for custom primitives.