View

The fundamental layout primitive.

View uses a flexbox column layout by default. Every instance of View uses relative positioning by default and the zIndex can only be used to control the relative Z-axis stacking of siblings within their parent.

Raw text nodes are not allowed as children of View. A View nested within a Text will render inline without altering its display or that of its children.

import { View } from 'react-native';

<View {...props}>{children}</View>;

Did you know? View elements do not support text content or text styles. Style properties like fontFamily are only supported on Text and TextInput elements.

API

Props

...AccessibilityProps

The accessibility props.

...PointerProps

The PointerEvent props.

...FocusProps

The FocusEvent props.

...KeyboardProps

The KeyboardEvent props.

...ResponderProps

The ResponderEvent props.

children any

The children of a View element can be other elements and must not include strings (or components that render down to strings).

dataSet ?Object

Equivalent to HTMLElement.dataset.

dir ?("ltr" | "rtl")

Equivalent to HTMLElement.dir.

href ?string

If href is defined, the view is rendered as an anchor tag pointing to this URL.

hrefAttrs ?Object

If href is defined, this prop defines related attributes to include on the anchor (e.g., download, rel, target) which may modify its behavior.

id ?string

Equivalent to HTMLElement.id.

lang ?string

Equivalent to HTMLElement.lang. This prop is used to infer writing direction if no dir is set.

onLayout ?({ nativeEvent: { layout: { x, y, width, height } } }) => void

This is invoked when a component is mounted and when its layout changes. x and y are the offsets from the parent node.

style ?Style

Set the styles of the view.

focusable ?boolean

Controls whether this view should be keyboard/remote focusable.

hasTVPreferredFocus ?boolean

If true, requests focus on mount in TV mode when the element is focusable.

tvFocusable ?boolean

TV navigation hint used by the web TV focus system. This is primarily used for focus containers (for example TVFocusGuideView).

isTVSelectable ?boolean

Legacy TV selectability prop. Prefer focusable for new code.

tabIndex 0 | -1

Set whether the view can receive keyboard focus.

testID ?string

Set the test selector label (via data-testid).

Instance methods

requestTVFocus () => void

Imperatively requests focus for this view using the spatial navigation manager.

Examples

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