↗

â†—

↗

☰

DefaultFocus

iOS

Android

Web

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.