Custom VR Button, that appears only on headsets and not on mobile phones

[llllkatjallll]

I combined two checks - Needle's check to see if it's a mobile device (this way, you can exclude desktops), and then a second check that uses user agent info to see if it's one of the most common mobile systems. Result: the button does not appear on mobile phones, but it is visible on Quest and Pico 🙂

P.S: I am using Svelte for 2D UI handling.

import { isMobileDevice, NeedleXRSession } from "@needle-tools/engine";

...

// check if this is a mobile phone
function isMobilePhone() {
    return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

...

// show the button, if the device is not a mobile phone and VR is supported
{#if  isMobileDevice() && !isMobilePhone() && $haveVR }
    <VrButton buttonFunction={() => StartVR()} />
{/if}