Develop

Gaze SDK for React Native

Updated: Aug 28, 2026

Meta Horizon OS infers gaze targets from the Android views behind React Native components. Use the Meta VR Gaze SDK to override that inference or add hover tooltips.

Most apps do not need a Gaze SDK to support Look and Pinch because Meta Horizon OS handles most interaction detection automatically.

Unstable SDK

The Meta VR Gaze SDK is unstable and available by request through the Meta Horizon developer support form⁠. Select Technical Support in the form when requesting the SDK. It is compatible with Meta Horizon OS v207, but apps submitted to the Meta Horizon Store with the SDK bundled will be rejected in order to ensure compatibility with future OS versions. A stable version will be published in a future release before Meta VR Glasses launch.

The SDK requires React 18.2.0 or later and React Native 0.85.0 or later.

Add the SDK

Install the JavaScript package:

npm install @metavr/gaze-compat

The SDK package also includes gaze-react-compat-0.4.0.aar. Copy the AAR into android/app/libs/.

These instructions assume that your project already includes the Meta VR OS JSDK as a compile-only dependency.

Add the local native AAR in android/app/build.gradle.kts:

dependencies {
    implementation(files("libs/gaze-react-compat-0.4.0.aar"))
}

The npm package supplies React Native automatic-linking configuration for GazeInteractionPackage, while the local AAR supplies the native implementation. Do not register the package manually in MainApplication.

Control targeting and tooltips

Wrap one React Native element in GazeInteraction. The wrapper accepts exactly one child. The following fragment belongs inside a component where onPress is in scope.

<GazeInteraction
  importantForInteraction="yes"
  tooltip={ {text: 'Settings', position: 'bottom'} }>
  <Pressable onPress={onPress}>
    <Text>Settings</Text>
  </Pressable>
</GazeInteraction>

Use importantForInteraction="auto" to keep the system’s default inference, "yes" to mark the child as a gaze target, and "no" to hide it from gaze targeting. Import yes from @metavr/gaze-compat, then pass yes({excludeDescendants: true}) to make a container the only gaze target in a nested group.

Learn more at Provide element shape and bounds.

The tooltip prop accepts text and the positions "top", "bottom", "start", and "end". Set suppressDefaultTooltip: true to prevent the standard Android tooltip from appearing alongside the gaze tooltip for controller or hand input.

On non-Quest Android devices, the wrapper has no gaze-specific effect. On iOS, it renders its child directly. You do not need platform checks around the component.

Troubleshoot the integration

If props have no effect, confirm that the device runs a supported software version.
If the component is unavailable at runtime, run npx react-native config and confirm that it lists @metavr/gaze-compat. Also verify that gaze-react-compat-0.4.0.aar is in android/app/libs/ and included in Gradle.
If a wrapper reports that it can host only one child, group the children in a React Native View and wrap that single container.