View
This component is a generic container for other components.
Last updated
This component is a generic container for other components.
Last updated
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