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
Copy link
On this page
Styles
Props