VrButton #

This Component is a helper for managing the interaction state machine for a gaze button. By default, a VrButton has no appearance and will only act as a wrapper to capture events, but it can be styled in the same ways as a View.

<VrButton style={{width: 0.7}} onClick={()=>this._onViewClicked()}> <Image style={{width:1, height:1}} source={{uri:'../../Assets/Images/gaze_cursor_cross_hi.png'}} inset={[0.2,0.2,0.2,0.2]} insetSize={[0.05,0.45,0.55,0.15]} > </Image> </VrButton>

The State Machine for button state.

+-------------+ | FOCUS_OUT | <---------------------------------------------------------+ +-------------+ <--------------------+ | + ^ | | | ENTER | EXIT | EXIT EXIT| v + + + +-----------+ KEY_PRESSED +----------------+ LONG DELAY+---------------------+ | FOCUS_IN | +-----------> | FOCUS_IN_PRESS | +-------> | FOCUS_IN_LONG_PRESS | +-----------+ +----------------+ +---------------------+ ^ ^ + + | | KEY_RELEASED | | | +-------------------------+ KEY_RELEASED | +-----------------------------------------------------------------------+ Standard component dispatching click events These input event will be considered as primary key and handled by VrButton - Button A on XBOX Gamepad - Space button on keyboard - Left click on Mouse - Touch on screen

VrButton supports triggering sound effects when the user interacts with it. These sounds are asset() statements, or resource declaration in the form {uri: 'PATH'}. Since different browsers support different audio formats, you can also supply a map of formats to their corresponding resource objects, and React VR will pick the supported sound for the browser:

<VrButton onClickSound={{ ogg: asset('click.ogg'), mp3: asset('click.mp3'), }}>

You can read more about supported audio formats in the docs for the Sound Effects API.

Props #

disabled?: PropTypes.bool #

If true, this component can't be interacted with.

ignoreLongClick?: PropTypes.bool #

If true, long-press will not trigger onLongClick or onClick. Default=false

longClickDelayMS?: PropTypes.number #

Custom delay time for long click

onButtonPress?: PropTypes.func #

Invoked when button is focused and key pressed

onButtonRelease?: PropTypes.func #

Invoked when button is focused and key released

onClick?: PropTypes.func #

Invoked on short click event or if no long click handler

onClickSound?: PropTypes.object #

Sound resource to play when the button is clicked

onEnter?: PropTypes.func #

Invoked when button hit enters

onEnterSound?: PropTypes.object #

Sound resource to play when gaze or cursor enters the button

onExit?: PropTypes.func #

Invoked when button hit exits

onExitSound?: PropTypes.object #

Sound resource to play when gaze or cursor exits the button

onLongClick?: PropTypes.func #

Invoked on long click event

onLongClickSound?: PropTypes.object #

Sound resource to play when the button is long-pressed

style?: style #

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

You can file an issue on GitHub if you see a typo or error on this page!