↗
DefaultFocus
iOS
Android
Web
TV
Marks which focusable child should receive focus first when a spatial navigation area becomes active.
Import
tsx
import { DefaultFocus } from 'react-native-cross-elements';
Preview
default-focus.tsx
Second item starts focused
Wrap one child in DefaultFocus.
Usage
tsx
import { DefaultFocus, SpatialNavigationFocusableView, SpatialNavigationView, } from 'react-native-cross-elements'; <SpatialNavigationView direction="horizontal"> <SpatialNavigationFocusableView>{() => <Card>First</Card>}</SpatialNavigationFocusableView> <DefaultFocus> <SpatialNavigationFocusableView>{() => <Card>Starts focused</Card>}</SpatialNavigationFocusableView> </DefaultFocus> </SpatialNavigationView>
Tip
ℹ️
Use one DefaultFocus per active navigation group to avoid ambiguous initial focus.