View
The most fundamental component for building a UI, View is a container that supports layout with Flexbox, appearance styling, and input events. In 2D space, View is a box for spacing elements, or creating borders and background colors. In 3D space, View is used for grouping Entities or other Views, applying transforms in 3D space.
This example creates a View that wraps two colored boxes and a text component in a row with padding.
class ViewColoredBoxesWithText extends Component {render() {return (<View style={{flexDirection: 'row', height: 100, padding: 20}}><View style={{backgroundColor: 'blue', flex: 0.3}} /><View style={{backgroundColor: 'red', flex: 0.5}} /><Text>Hello World!</Text></View>);}}
Props
hitSlop?: number
This defines how far a touch event can start away from the view. This becomes important when creating small interactive targets that are clicked with a VR controller.
onEnter?: function
Invoked when a cursor begins intersecting with the view
onExit?: function
Invoked when a cursor stops intersecting with the view
onInput?: function
Invoked when a user presses an input button while the cursor is over the view. More on this in the Input Handling docs.
pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto'
Controls whether the View can be the target of input events.
auto
- The view can be the target of eventsnone
- The view is never the target of eventsbox-none
- The view is never the target of touch events, but its subviews can be.box-only
- The view can be the target of touch events, but its subviews cannot be.
style? Style | Object
- Layout Props...
- Shadow Props...
- transform -
transform
takes an array of transformation objects that are applied last-to-first. The following entries are supported:{rotateX: number | string}
{rotateY: number | string}
{rotateZ: number | string}
- Not supported on Surfaces{scaleX: number}
{scaleY: number}
{scaleZ: number}
- Not supported on Surfaces{translateX: number}
{translateY: number}
{translateZ: number}
- Not supported on Surfaces
- backgroundColor
color
- borderBottomLeftRadius
number
- borderBottomRightRadius
number
- borderBottomWidth
number
- borderColor
color
- borderLeftWidth
number
- borderRadius
number
- borderRightWidth
number
- borderTopLeftRadius
number
- borderTopRightRadius
number
- borderTopWidth
number
- borderWidth
number
- opacity
number
- overflow
'visible' | 'hidden'