TVFocusGuideView

A focus container used to shape directional navigation behavior on TV platforms.

TVFocusGuideView is useful when moving from touch-centric layouts to remote-driven layouts where focus order must be explicit.

import { TVFocusGuideView } from 'react-native';

<TVFocusGuideView autoFocus trapFocusLeft trapFocusRight>
  {children}
</TVFocusGuideView>;

API

...ViewProps

All View props are supported.

enabled ?boolean = true

Controls visibility (display: flex when true, display: none when false).

destinations ?Array<ComponentOrHandle>

Ordered list of focus destinations used by the spatial manager.

autoFocus ?boolean

Enables autofocus behavior for this container.

focusable ?boolean

When set to false, the container and its subtree are treated as not focusable.

trapFocusUp ?boolean

Blocks exiting this container upward during directional navigation.

trapFocusDown ?boolean

Blocks exiting this container downward during directional navigation.

trapFocusLeft ?boolean

Blocks exiting this container to the left during directional navigation.

trapFocusRight ?boolean

Blocks exiting this container to the right during directional navigation.

safePadding ?'vertical' | 'horizontal' | 'both' | null

Deprecated compatibility prop.

setDestinations (destinations: Array<ComponentOrHandle>) => void

Imperatively updates the destination targets used by this focus guide.

  For TV Examples: LRUD navigation is already enabled in this sandbox. Use your keyboard arrow keys to move focus.