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