react-native-web/docs/components/View.md

View

View is the fundamental UI building block. It is a component that supports style, layout with flexbox, and accessibility controls. It can be nested inside another View and has 0-to-many children of any type.

Also, refer to React Native's documentation about the Gesture Responder System.

Unsupported React Native props: collapsable, onAccessibilityTap, onMagicTap.

Props

NOTE: View will transfer all other props to the rendered HTML element.

accessibilityLabel: ?string

Overrides the text that's read by a screen reader when the user interacts with the element. (This is implemented using aria-label.)

See the Accessibility guide for more information.

accessibilityLiveRegion: ?enum('assertive', 'none', 'polite')

Indicates to assistive technologies whether to notify the user when the view changes. The values of this attribute are expressed in degrees of importance. When regions are specified as polite (recommended), updates take low priority. When regions are specified as assertive, assistive technologies will interrupt and immediately notify the user. (This is implemented using aria-live.)

See the Accessibility guide for more information.

(web) accessibilityRole: ?enum(roles)

Allows assistive technologies to present and support interaction with the view in a manner that is consistent with user expectations for similar views of that type. For example, marking a touchable view with an accessibilityRole of button. (This is implemented using ARIA roles).

See the Accessibility guide for more information.

accessible: ?boolean

When true, indicates that the view is an accessibility element (i.e., focusable) and groups its child content. By default, all the touchable elements and elements with accessibilityRole of button and link are accessible. (This is implemented using tabindex.)

See the Accessibility guide for more information.

children: ?element

Child content.

hitSlop: ?object

This defines how far a touch event can start away from the view (in pixels). Typical interface guidelines recommend touch targets that are at least 30 - 40 points/density-independent pixels.

For example, if a touchable view has a height of 20 the touchable height can be extended to 40 with hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}.

importantForAccessibility: ?enum('auto', 'no', 'no-hide-descendants', 'yes')

A value of no will remove the element from the tab flow.

A value of no-hide-descendants will hide the element and its children from assistive technologies. (This is implemented using aria-hidden.)

See the Accessibility guide for more information.

onLayout: ?function

Invoked on mount and layout changes with { nativeEvent: { layout: { x, y, width, height } } }, where x and y are the offsets from the parent node.

onMoveShouldSetResponder: ?function => boolean

Does this view want to "claim" touch responsiveness? This is called for every touch move on the View when it is not the responder.

onMoveShouldSetResponderCapture: ?function => boolean

If a parent View wants to prevent a child View from becoming responder on a move, it should have this handler return true.

onResponderGrant: ?function

The View is now responding to touch events. This is the time to highlight and show the user what is happening. For most touch interactions, you'll simply want to wrap your component in TouchableHighlight or TouchableOpacity.

onResponderMove: ?function

The user is moving their finger.

onResponderReject: ?function

Another responder is already active and will not release it to the View asking to be the responder.

onResponderRelease: ?function

Fired at the end of the touch.

onResponderTerminate: ?function

The responder has been taken from the View.

onResponderTerminationRequest: ?function

Some other View wants to become responder and is asking this View to release its responder. Returning true allows its release.

onStartShouldSetResponder: ?function => boolean

Does this view want to become responder on the start of a touch?

onStartShouldSetResponderCapture: ?function => boolean

If a parent View wants to prevent a child View from becoming the responder on a touch start, it should have this handler return true.

pointerEvents: ?enum('auto', 'box-only', 'box-none', 'none') = 'auto'

Controls whether the View can be the target of touch events. The enhanced pointerEvents modes provided are not part of the CSS spec, therefore, pointerEvents is excluded from style.

box-none is the equivalent of:

.box-none { pointer-events: none }
.box-none * { pointer-events: auto }

box-only is the equivalent of:

.box-only { pointer-events: auto }
.box-only * { pointer-events: none }

style: ?style

• alignContent
• alignItems
• alignSelf
• animationDelay ‡
• animationDirection ‡
• animationDuration ‡
• animationFillMode ‡
• animationIterationCount ‡
• animationName ‡
• animationPlayState ‡
• animationTimingFunction ‡
• backfaceVisibility
• backgroundAttachment ‡
• backgroundClip ‡
• backgroundColor
• backgroundImage ‡
• backgroundOrigin ‡
• backgroundPosition ‡
• backgroundRepeat ‡
• backgroundSize ‡
• borderColor (single value)
• borderTopColor
• borderBottomColor
• borderRightColor
• borderLeftColor
• borderRadius (single value)
• borderTopLeftRadius
• borderTopRightRadius
• borderBottomLeftRadius
• borderBottomRightRadius
• borderStyle (single value)
• borderTopStyle
• borderRightStyle
• borderBottomStyle
• borderLeftStyle
• borderWidth (single value)
• borderBottomWidth
• borderLeftWidth
• borderRightWidth
• borderTopWidth
• bottom
• boxShadow ‡
• boxSizing
• clip ‡
• cursor ‡
• display
• filter ‡
• flex (number)
• flexBasis
• flexDirection
• flexGrow
• flexShrink
• flexWrap
• gridAutoColumns ‡
• gridAutoFlow ‡
• gridAutoRows ‡
• gridColumnEnd ‡
• gridColumnGap ‡
• gridColumnStart ‡
• gridRowEnd ‡
• gridRowGap ‡
• gridRowStart ‡
• gridTemplateColumns ‡
• gridTemplateRows ‡
• gridTemplateAreas ‡
• height
• justifyContent
• left
• margin (single value)
• marginBottom
• marginHorizontal
• marginLeft
• marginRight
• marginTop
• marginVertical
• maxHeight
• maxWidth
• minHeight
• minWidth
• opacity
• order
• outline ‡
• outlineColor ‡
• overflow
• overflowX ‡
• overflowY ‡
• padding (single value)
• paddingBottom
• paddingHorizontal
• paddingLeft
• paddingRight
• paddingTop
• paddingVertical
• perspective ‡
• perspectiveOrigin ‡
• position
• right
• shadowColor
• shadowOffset
• shadowOpacity
• shadowRadius
• top
• transform
• transformOrigin ‡
• transitionDelay ‡
• transitionDuration ‡
• transitionProperty ‡
• transitionTimingFunction ‡
• userSelect ‡
• visibility ‡
• width
• willChange ‡
• zIndex

‡ web only.

Default:

{
  alignItems: 'stretch',
  borderWidth: 0,
  borderStyle: 'solid',
  boxSizing: 'border-box',
  display: 'flex',
  flexBasis: 'auto',
  flexDirection: 'column',
  flexShrink: 0,
  margin: 0,
  padding: 0,
  position: 'relative'
};

(See facebook/css-layout).

testID: ?string

Used to locate this view in end-to-end tests.

Examples

import React, { Component, PropTypes } from 'react'
import { StyleSheet, View } from 'react-native'

export default class ViewExample extends Component {
  render() {
    return (
      <View style={styles.row}>
        {
          ['1', '2', '3', '4', '5'].map((value, i) => {
            return <View children={value} key={i} style={styles.cell} />
          })
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row'
  },
  cell: {
    flexGrow: 1
  }
})