ViroVirtualJoystick

A native-rendered on-screen analog joystick for AR/VR input. New in v2.56.0.

ViroVirtualJoystick is a native-rendered on-screen joystick. It writes stick state to a VROInputState registry entry with single-digit-millisecond latency (no JS bridge round-trip). Pair it with ViroVirtualButton via a shared controllerId.

Import

tsx

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

Props

controllerId (* required)

Type	Description
string	Identifies the shared controller state. Must match the controllerId of any ViroVirtualButton you want to share state with.

stickSide

Type	Description
"left" | "right"	Which analog stick this joystick drives. Default: "left".

radius

Type	Description
number	Outer ring radius in dp/points. Default: 60.

tintColor

Type	Description
string | number	Color of the ring and knob. Default: rgba(255,255,255,0.6).

onStickChange

Type	Description
(e) => void	Fires when the stick value changes. e.nativeEvent.x and .y are number in [-1, 1].

style

Type	Description
StyleProp<ViewStyle>	Must include explicit width and height — native views have no intrinsic size.

🚧

Explicit size required

Always set style={{ width: N, height: N }}. Without an explicit size the view collapses to 0×0 and receives no touch events.

Example

tsx

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

const ctrl = { x: 0, y: 0 }; // module-level, shared with game loop

<ViroVirtualJoystick
  controllerId="p1"
  stickSide="left"
  radius={60}
  tintColor="rgba(255,255,255,0.7)"
  onStickChange={(e) => {
    ctrl.x = e.nativeEvent.x;
    ctrl.y = e.nativeEvent.y;
  }}
  style={{ width: 120, height: 120 }}
/>;

Architecture note

Touch events never cross the JS bridge. The native view (iOS UIView, Android View) computes normalized stick deflection and writes directly to a VROInputState via VROVirtualControllerRegistry. The onStickChange callback is a secondary, optional JS notification fired in the same tick.

Platform Support

Platform	Supported	Notes
iOS	✅
Android	✅	JS callbacks not fired on Android pre-5.0

See also

• ViroVirtualButton — pairs with this joystick via a shared controllerId.
• ViroGameLoop — read the shared controller state each frame.