ViroVirtualButton

A native-rendered on-screen button that pairs with ViroVirtualJoystick. New in v2.56.0.

ViroVirtualButton is a native-rendered circular button. It pairs with ViroVirtualJoystick via a shared controllerId, writing button state into the same VROInputState registry entry.

Import

tsx

import { ViroVirtualButton } from "@reactvision/react-viro";

Props

controllerId (* required)

Type	Description
string	Shared controller ID. Must match the joystick / other buttons you want to share state with.

button (* required)

Type	Description
ViroButtonName	Which button bit to set.

size

Type	Description
number	Circle diameter in dp/points. Default: 44.

tintColor

Type	Description
string | number	Button fill color. Default: rgba(255,255,255,0.6).

onPressIn

Type	Description
(e) => void	Fires on touch-down.

onPressOut

Type	Description
(e) => void	Fires on touch-up or cancel.

style

Type	Description
StyleProp<ViewStyle>	Must include explicit width and height.

ViroButtonName

TypeScript

type ViroButtonName =
  | "A"
  | "B"
  | "X"
  | "Y"
  | "Z"
  | "L1"
  | "R1"
  | "L2"
  | "R2"
  | "Start"
  | "Select";

🚧

Explicit size required

Like ViroVirtualJoystick, this component has no intrinsic size. Always set style={{ width: N, height: N }} or it collapses to 0×0 and receives no touch events.

Example

tsx

<ViroVirtualButton
  controllerId="p1"
  button="A"
  size={48}
  tintColor="#FF6B9D"
  onPressIn={() => console.log("A pressed")}
  onPressOut={() => console.log("A released")}
  style={{ width: 48, height: 48 }}
/>

Reading controller state from C++

C++

// virocore — safe from any thread
auto state = VROVirtualControllerRegistry::instance().peek("p1");
if (state) {
  auto snap = state->snapshot();
  float leftX = snap.stickLX;
  float leftY = snap.stickLY;
  bool aPressed = (snap.buttonBits >> VROButtonIndex_A) & 1;
}

Platform Support

Platform	Supported
iOS	✅
Android	✅

See also

• ViroVirtualJoystick — shares the same controllerId registry entry.
• ViroGameLoop — read the shared controller state each frame.