View

This component is a generic container for other components.

Styles

  • Flexbox Styles

  • View Styles

  • Transform Styles

Props

Name

Type

Description

accessibilityLabel

string

  • Alternate text for screen readers

  • If not defined, title prop is used

accessibilityTraits

AccessibilityTrait | AccessibilityTrait[]

  • Traits used to hint screen readers, etc.

accessibilityLiveRegion

AccessibilityLiveRegion

  • Region for accessibility mechanisms

  • Android and web only

accessibilityId

string

  • It is hard or impossible to tell by a reference to an instance of a component from where this component has been instantiated

  • You can assign this property and check instance.props.accessibilityId

  • For example accessibilityId is used in View's FocusArbitrator callback

activeOpacity

number

  • Opacity value the button should animate to, on touch on views that have onPress handlers

  • iOS and Android only

animateChildEnter

boolean

  • Animation of children:

    • Every child must have a key

    • String refs aren't supported on children, only callback refs are

animateChildLeave

boolean

  • Animation of children

    • Every child must have a key

    • String refs aren't supported on children, only callback refs are

animateChildMove

boolean

  • Animation of children

    • Every child must have a key

    • String refs aren't supported on children, only callback refs are

ariaLabelledBy?

string

  • Id of an element that describes the view for screen-reader

  • Web only

ariaRoleDescription?

string

  • A custom role description to be read by the screen-readers

  • Web only

blockPointerEvents

boolean

  • Block touches for this component and all of its children

disableTouchOpacityAnimation

boolean

  • Disable default opacity animation on touch on views that have onPress handlers

  • iOS and Android only

id

string

  • Specifies a unique id for an HTML element

  • NOTE: This property may be going away in future versions

  • Web only

ignorePointerEvents

boolean

  • Ignore clicks and other mouse events, allowing children or components behind to receive them

importantForAccessibility?

ImportantForAccessibility

  • Expose the element and/or its children as accessible to screen-readers

restrictFocusWithin

boolean

  • When the keyboard navigation is happening, restrict the focusable elements within this view

  • Useful for popups and modals, you might want to prevent the focus from going outside of the popup or modal

  • The views with restrictFocusWithin are stacked and the last mounted view is a winner

  • This means if you, for example, have restricted the focus within some modal, and you have a popup (which also desires for a restricted focus) inside this modal, the popup will get the restriction, but when dismissed, the restriction will be restored for the modal

  • See also the companion method setFocusRestricted() below

  • WARNING: For the sake of performance, this property is readonly and changing it during the View life cycle will produce an error

limitFocusWithin

LimitFocusType

  • When the keyboard navigation is happening, do not focus on this view and on all focusable elements inside this view

  • See also the companion method setFocusLimited() below

  • Useful for the list items, allows to skip the consecutive focusing on one list item (and item's internal focusable elements) after another using the Tab key and implement the switching between the items using the arrow keys (or using some other behaviour)

  • When limitFocusWithin=LimitFocusType.Limited, the View and the focusable components inside the View get both tabIndex=-1 and aria-hidden=true

  • When limitFocusWithin=LimitFocusType.Accessible, the View and the focusable components inside the View get only tabIndex=-1.

  • WARNING: For the sake of performance, this property is readonly and changing it during the View life cycle will produce an error

autoFocus

boolean

  • Should be focused when the component is mounted, see also arbitrateFocus property below

  • WARNING: autoFocus=true means that this View's requestFocus() method will be called, however calling requestFocus() might have no effect (for example on web View is focusable only when tabIndex is specified), the application has to handle this either while setting this property or in the View's FocusArbitrator callback

arbitrateFocus

FocusArbitrator

  • When multiple components with autoFocus=true inside this View are mounting at the same time, and/or multiple components inside this view have received focus() call during the same render cycle, this callback will be called so that it's possible for the application to decide which one should actually be focused

importantForLayout

boolean

  • Additional invisible DOM elements will be added inside the view to track the size changes that are performed behind our back by the browser's layout engine faster (ViewBase checks for the layout updates once a second and sometimes it's not fast enough)

  • Web only

onDragStart

(e: DragEvent) => void

  • Mouse-specific Events

  • For drag specific events, if onDragStart is present, the view is draggable

  • onDragStart/onDrag/onDragEnd are source specific events

  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events

onDrag

(e: DragEvent) => void

  • Mouse-specific Events

  • For drag specific events, if onDragStart is present, the view is draggable

  • onDragStart/onDrag/onDragEnd are source specific events

  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events

onDragEnd

(e: DragEvent) => void

  • Mouse-specific Events

  • For drag specific events, if onDragStart is present, the view is draggable

  • onDragStart/onDrag/onDragEnd are source specific events

  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events

onDragEnter

(e: DragEvent) => void

  • Mouse-specific Events

  • For drag specific events, if onDragStart is present, the view is draggable

  • onDragStart/onDrag/onDragEnd are source specific events

  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events

onDragOver

(e: DragEvent) => void

  • Mouse-specific Events

  • For drag specific events, if onDragStart is present, the view is draggable

  • onDragStart/onDrag/onDragEnd are source specific events

  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events

onDragLeave

(e: DragEvent) => void

  • Mouse-specific Events

  • For drag specific events, if onDragStart is present, the view is draggable

  • onDragStart/onDrag/onDragEnd are source specific events

  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events

onDrop

(e: DragEvent) => void

  • Mouse-specific Events

  • For drag specific events, if onDragStart is present, the view is draggable

  • onDragStart/onDrag/onDragEnd are source specific events

  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events

onMouseEnter

(e: MouseEvent) => void

  • Mouse-specific Events

  • For drag specific events, if onDragStart is present, the view is draggable

  • onDragStart/onDrag/onDragEnd are source specific events

  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events

onMouseLeave

(e: MouseEvent) => void

  • Mouse-specific Events

  • For drag specific events, if onDragStart is present, the view is draggable

  • onDragStart/onDrag/onDragEnd are source specific events

  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events

onMouseMove

(e: MouseEvent) => void

  • Mouse-specific Events

  • For drag specific events, if onDragStart is present, the view is draggable

  • onDragStart/onDrag/onDragEnd are source specific events

  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events

onMouseOver

(e: MouseEvent) => void

  • Mouse-specific Events

  • For drag specific events, if onDragStart is present, the view is draggable

  • onDragStart/onDrag/onDragEnd are source specific events

  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events

onContextMenu

(e: React.SyntheticEvent) => void

  • Mouse & Touch Events

onPress

(e: SyntheticEvent) => void

  • Mouse & Touch Events

onFocus

(e: FocusEvent) => void

  • Focus Events

onBlur

(e: FocusEvent) => void

  • Focus Events

onKeyPress

(e: KeyboardEvent) => void

  • Keyboard Events

onTouchStartCapture

(e: React.SyntheticEvent) => void

  • Touch-specific Events

onTouchMoveCapture

(e: React.SyntheticEvent) => void

  • Touch-specific Events

onLongPress

(e: SyntheticEvent) => void

  • Touch-specific Events

onMoveShouldSetResponder

(e: React.SyntheticEvent) => boolean

  • Touch-specific Events

onMoveShouldSetResponderCapture

(e: React.SyntheticEvent) => boolean

  • Touch-specific Events

onResponderGrant

(e: React.SyntheticEvent) => void

  • Touch-specific Events

onResponderReject

(e: React.SyntheticEvent) => void

  • Touch-specific Events

onResponderRelease

(e: React.SyntheticEvent) => void

  • Touch-specific Events

onResponderStart

(e: React.TouchEvent) => void

  • Touch-specific Events

onResponderMove

(e: React.TouchEvent) => void

  • Touch-specific Events

onResponderEnd

(e: React.TouchEvent) => void

  • Touch-specific Events

onResponderTerminate

(e: React.SyntheticEvent) => void

  • Touch-specific Events

onResponderTerminationRequest

(e: React.SyntheticEvent) => boolean

  • Touch-specific Events

onStartShouldSetResponder

(e: React.SyntheticEvent) => boolean

  • Touch-specific Events

onStartShouldSetResponderCapture

(e: React.SyntheticEvent) => boolean

  • Touch-specific Events

onLayout

(e: ViewOnLayoutEvent) => void

  • Other Events

shouldRasterizeIOS

boolean

  • Rasterize contents using offscreen bitmap (perf optimization)

  • iOS only

tabIndex

number

  • Keyboard tab order

testId

string

  • ID that can be used to identify the instantiated element for testing purposes

title

string

  • Text for a tooltip

style

ViewStyleRuleSet | ViewStyleRuleSet[]

  • See below for supported styles

viewLayerTypeAndroid

'none' | 'software' | 'hardware'

  • Should use hardware or software rendering?

  • Android only property

underlayColor

string

  • Background color that will be visible on touch on views that have onPress handlers

  • iOS and Android only

useSafeInsets

boolean

  • When true:

    • Renders children within the safe area boundaries of a device, i.e. with padding with ensure the children don't cover navigation bars, toolbars etc.

    • Applies a style of { flex: 1, alignSelf: 'stretch' } to this view

    • Some ViewProps may be ignored. iOS only

PreviousGetting StartedNextScroll

Last updated