Search code examples
react-nativewebviewaugmented-realityaframewebxr

WebXR not working in React Native WebView Component


How to make https://xr-spinosaurus.glitch.me/ work in a React Native WebView Component?

import React, { Component } from 'react';
import { WebView } from 'react-native';

export default class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://xr-spinosaurus.glitch.me/'}}
        style={{marginTop: 20}}
      />
    );
  }
}

Right now adding this to react-native only shows VR option but not AR option.

If you access the link directly you could see VR and AR options but I couldn't find the AR option when run in a Web View component inside React-Native But the same AR option is available if I directly access the link on an ARCore supported Device.

How to make this code also show the AR option in React-Native?


Solution

  • AFAIK that is currently not possible, since the Android WebView doesn't (yet) support the WebXR Device API (and neither on apple). Source: https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API

    I've been running into the same problem, hopefully support will be added soon, but for now there's not much you can do.