↗

â†—

↗

☰

SpatialNavigationView

iOS

Android

Web

A directional container that groups focusable children and tells the spatial navigator how focus should move between them.

Import

tsx

import { SpatialNavigationView } from 'react-native-cross-elements';

Preview

spatial-navigation-view.tsx

Selected: None

Usage

tsx

import { SpatialNavigationRoot, SpatialNavigationView, SpatialNavigationFocusableView, } from 'react-native-cross-elements'; <SpatialNavigationRoot> <SpatialNavigationView direction="horizontal"> {items.map((item) => ( <SpatialNavigationFocusableView key={item} onSelect={() => console.log(item)}> {({ isFocused }) => <Card focused={isFocused}>{item}</Card>} </SpatialNavigationFocusableView> ))} </SpatialNavigationView> </SpatialNavigationRoot>

Direction

ℹ️

Use direction="horizontal" for rows and direction="vertical" for columns.