{"_id":"5b8469e2146f290003ee2565","category":{"_id":"5b8469e2146f290003ee2500","version":"5b8469e2146f290003ee2585","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-08-01T23:04:12.838Z","from_sync":false,"order":8,"slug":"api-reference","title":"API Reference"},"project":"578c4badbd223d2000cc1441","user":"584328a7c3fec61b001d17c6","parentDoc":null,"version":{"_id":"5b8469e2146f290003ee2585","project":"578c4badbd223d2000cc1441","__v":0,"forked_from":"5b74987b8326970003cfc12d","createdAt":"2018-04-23T20:03:35.726Z","releaseDate":"2018-04-23T20:03:35.726Z","categories":["5b8469e2146f290003ee24fb","5b8469e2146f290003ee24fc","5b8469e2146f290003ee24fd","5b8469e2146f290003ee24fe","5b8469e2146f290003ee24ff","5b8469e2146f290003ee2500","5b8469e2146f290003ee2501","5b8469e2146f290003ee2502","5b8469e2146f290003ee2503"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.10.0","version":"2.10.0"},"githubsync":"","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-02-27T20:18:38.792Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":49,"body":"We provide a helpful utility module `isARSupportedOnDevice` to enable our developers to check their app users' device for compatibility to support their AR experiences conditionally. This way app developers can check and render appropriate views depending on whether the device is supported by the underlying AR system.\n\n#####Description\nThe function has the following signature:\n```\nisARSupportedOnDevice(notSupportedCallback, supportedCallback)\n\nArguments:\n(React.PropTypes.func) notSupportedCallback - Called when the device does not support AR\n(React.PropTypes.func) supportedCallback - Called when the device supports AR\n```\n\n#####Example Use:\nTo take advantage of this utility, simply import ViroUtils on top of your scene and create an alias to the function like below:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import {\\n  ViroUtils,\\n} from 'react-viro';\\n\\nvar isARSupportedOnDevice = ViroUtils.isARSupportedOnDevice;\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThen, wherever in your scene you want to show a Viro AR Scene, you can check for AR support. For example, in the following snippet, we make this check in `componentWillMount()`. This way we know what to render based on compatibility:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"  componentWillMount() {\\n    isARSupportedOnDevice(this._handleARNotSupported, this._handleARSupported);\\n  }\\n  _handleARSupported() {\\n    console.log(\\\"AR supported\\\");\\n    this._getARNavigator();\\n  }\\n  _handleARNotSupported() {\\n    console.log(\\\"AR not supported\\\");\\n    this._getNonARExperience();\\n  }\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"isarsupportedondevice","type":"basic","title":"IsARSupportedOnDevice"}

IsARSupportedOnDevice


We provide a helpful utility module `isARSupportedOnDevice` to enable our developers to check their app users' device for compatibility to support their AR experiences conditionally. This way app developers can check and render appropriate views depending on whether the device is supported by the underlying AR system. #####Description The function has the following signature: ``` isARSupportedOnDevice(notSupportedCallback, supportedCallback) Arguments: (React.PropTypes.func) notSupportedCallback - Called when the device does not support AR (React.PropTypes.func) supportedCallback - Called when the device supports AR ``` #####Example Use: To take advantage of this utility, simply import ViroUtils on top of your scene and create an alias to the function like below: [block:code] { "codes": [ { "code": "import {\n ViroUtils,\n} from 'react-viro';\n\nvar isARSupportedOnDevice = ViroUtils.isARSupportedOnDevice;", "language": "javascript" } ] } [/block] Then, wherever in your scene you want to show a Viro AR Scene, you can check for AR support. For example, in the following snippet, we make this check in `componentWillMount()`. This way we know what to render based on compatibility: [block:code] { "codes": [ { "code": " componentWillMount() {\n isARSupportedOnDevice(this._handleARNotSupported, this._handleARSupported);\n }\n _handleARSupported() {\n console.log(\"AR supported\");\n this._getARNavigator();\n }\n _handleARNotSupported() {\n console.log(\"AR not supported\");\n this._getNonARExperience();\n }", "language": "javascript" } ] } [/block]