{"_id":"5b8469e2146f290003ee2561","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-03-30T23:34:42.659Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":45,"body":"ViroVRSceneNavigator is the entry point for VR applications. Please see the [Scene Navigation Guide](scene-navigation) for more information on how to properly navigate between scenes.\n\n######Example use:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var MyStartScene = require('./MyStartScene');\\n\\nimport {\\n  AppRegistry,\\n  ViroScene,\\n  ViroVRSceneNavigator,\\n} from 'react-viro';\\n\\nvar ViroSceneNav = React.createClass({\\n  render: function() {\\n    return (\\n      <ViroVRSceneNavigator\\n        initialScene={{\\n          scene: MyStartScene,\\n        }}\\n      />\\n    );\\n  }\\n})\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Props\"\n}\n[/block]\n##Required Props\n[block:parameters]\n{\n  \"data\": {\n    \"h-1\": \"PropType\",\n    \"h-0\": \"PropKey\",\n    \"0-0\": \"**apiKey**\",\n    \"0-1\": \"**PropTypes.string.isRequired
**
\\n\\nRequired API Key\",\n    \"1-0\": \"**initialScene**\",\n    \"1-1\": \"**PropTypes.shape( {scene: PropTypes.func.isRequired
} ),**
\\n\\nThe initial scene to display for your application on application start.\"\n  },\n  \"cols\": 2,\n  \"rows\": 2\n}\n[/block]\n##Optional Props \n[block:parameters]\n{\n  \"data\": {\n    \"1-0\": \"**debug**\",\n    \"7-0\": \"**vrModeEnabled**\",\n    \"8-0\": \"**rotation**\",\n    \"9-0\": \"**style**\",\n    \"10-0\": \"**text**\",\n    \"11-0\": \"**transformBehaviors**\",\n    \"13-0\": \"**visible**\",\n    \"12-0\": \"**width**\",\n    \"h-0\": \"PropKey\",\n    \"h-1\": \"PropType\",\n    \"1-1\": \"**PropTypes.bool**\\n\\nUsed to enable dev menu on Android Nougat device with Cardboard.\",\n    \"7-1\": \"**PropTypes.bool**\\n\\nCalling vrModeEnabled allows switching to and from VR mode. When set to false, it transitions back to pre-VR (mono) mode.  When set to true, we set thie view into a full VR mode.  This is set to true by default.\",\n    \"8-1\": \"PropTypes.arrayOf(PropTypes.number)\\n\\nPut the PropType Description here.\",\n    \"9-1\": \"stylePropType\",\n    \"10-1\": \"PropTypes.string\\n\\nPut the PropType Description here.\",\n    \"11-1\": \"PropTypes.arrayOf(PropTypes.string)\\n\\nPut the PropType Description here.\",\n    \"12-1\": \"PropTypes.number\\n\\nPut the PropType Description here.\",\n    \"13-1\": \"PropTypes.bool\\n\\nPut the PropType Description here.\",\n    \"6-0\": \"**viroAppProps**\",\n    \"6-1\": \"**PropTypes.object**\\n\\nA javascript object containing properties for this viro app.  One use would be to pass in properties from native if you're using a hybrid applications.\",\n    \"3-0\": \"**onExitViro**\",\n    \"3-1\": \"**PropTypes.func**\\n\\nCalled if the user presses the \\\"X\\\" button to exit.\",\n    \"2-0\": \"**hdrEnabled**\",\n    \"2-1\": \"**PropTypes.bool**\\n\\nWhen HDR rendering is enabled, Viro uses a deeper color space and renders to a floating point texture, then applies a tone-mapping algorithm to preserve fine details in both bright and dark regions of the scene. If HDR is disabled, then features like Bloom and PBR will not work, and tone-mapping will be disabled.\\n\\nHDR is not supported on all devices.\",\n    \"4-0\": \"**pbrEnabled**\",\n    \"0-0\": \"**bloomEnabled**\",\n    \"5-0\": \"**shadowsEnabled**\",\n    \"0-1\": \"**PropTypes.bool**\\n\\nEnable or disable bloom. Bloom adds a soft glow to bright areas in scene, simulating the way bright highlights appear to the human eye. To make an object bloom, this property must be enabled, and the objects's threshold for bloom must be set via its material's ```bloomThreshold``` property.\",\n    \"4-1\": \"**PropTypes.bool**\\n\\nEnable or disable physically-based rendering. Physically based rendering, or PBR, produces more realistic lighting results for your scenes, and provides a more intuitive workflow for artists. To use PBR, this property must be enabled, and materials must use the ```physicallyBased``` lighting model. PBR is controlled by a variety of properties, see [PBR guide](doc:physically-based-rendering) for details.\",\n    \"5-1\": \"**PropTypes.bool**\\n\\nEnable or disable rendering dynamic shadows. If shadows are disabled here, shadow casting lights will simply not cast a shadow.\"\n  },\n  \"cols\": 2,\n  \"rows\": 8\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Methods\"\n}\n[/block]\nThe following functions are available on the `ViroVRSceneNavigator` component. You can get the handle to the `ViroVRSceneNavigator` in 2 ways:\n\n1. Use the built-in React Native `ref` property to grab a reference\n2. From your `ViroScene`. Each `ViroScene` added to a `ViroVRSceneNavigator` provides its parent navigator in the variable: `this.props.sceneNavigator`.\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"Push the given scene onto scene stack, displaying the scene to the user.\\n\\n|Parameters    | Description |        \\n| ------------- |:------------- |\\n|scene    | Scene that will be pushed onto the stack and displayed to the user |\",\n    \"h-0\": \"push(scene: ViroScene)\"\n  },\n  \"cols\": 1,\n  \"rows\": 1\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"pop()\",\n    \"0-0\": \"Pop the top most scene of the stack, effectively going back to the previous scene.\"\n  },\n  \"cols\": 1,\n  \"rows\": 1\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"pop(n: number)\",\n    \"0-0\": \"Go back n scenes at once. If n is equal to 1 this is equivalent to calling pop().\"\n  },\n  \"cols\": 1,\n  \"rows\": 1\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"jump(scene: ViroScene)\",\n    \"0-0\": \"Move to the given scene in the stack, removing it from its current position in the stack and placing it on top, thereby displaying it to the user. If the scene is not already on the stack, this method pushes the scene to the top of the stack, displaying it to the user. This is best used in applications where the user jumps between a set of scenes frequently.\\n\\n|Parameters    | Description |        \\n| ------------- |:------------- |\\n|scene    | Scene that will be moved or pushed to the top of the stack and displayed to the user |\"\n  },\n  \"cols\": 1,\n  \"rows\": 1\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"Replace the currently displayed scene (the scene at the top of the stack) with the given scene, displaying it to the user. This leaves the remainder of the stack unchanged.\\n\\n|Parameters    | Description |        \\n| ------------- |:------------- |\\n|scene    | Scene that will replace the scene at the top of stack and be displayed to the user |\",\n    \"h-0\": \"replace(scene: ViroScene)\"\n  },\n  \"cols\": 1,\n  \"rows\": 1\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"recenterTracking()\",\n    \"0-0\": \"Reorients the virtual world such that directly forward of the user is [0, 0, -1] by rotating the scene by the user's y-rotation.\"\n  },\n  \"cols\": 1,\n  \"rows\": 1\n}\n[/block]","excerpt":"","slug":"virovrscenenavigator","type":"basic","title":"ViroVRSceneNavigator"}

ViroVRSceneNavigator


ViroVRSceneNavigator is the entry point for VR applications. Please see the [Scene Navigation Guide](scene-navigation) for more information on how to properly navigate between scenes. ######Example use: [block:code] { "codes": [ { "code": "var MyStartScene = require('./MyStartScene');\n\nimport {\n AppRegistry,\n ViroScene,\n ViroVRSceneNavigator,\n} from 'react-viro';\n\nvar ViroSceneNav = React.createClass({\n render: function() {\n return (\n <ViroVRSceneNavigator\n initialScene={{\n scene: MyStartScene,\n }}\n />\n );\n }\n})", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Props" } [/block] ##Required Props [block:parameters] { "data": { "h-1": "PropType", "h-0": "PropKey", "0-0": "**apiKey**", "0-1": "**PropTypes.string.isRequired
**
\n\nRequired API Key", "1-0": "**initialScene**", "1-1": "**PropTypes.shape( {scene: PropTypes.func.isRequired
} ),**
\n\nThe initial scene to display for your application on application start." }, "cols": 2, "rows": 2 } [/block] ##Optional Props [block:parameters] { "data": { "1-0": "**debug**", "7-0": "**vrModeEnabled**", "8-0": "**rotation**", "9-0": "**style**", "10-0": "**text**", "11-0": "**transformBehaviors**", "13-0": "**visible**", "12-0": "**width**", "h-0": "PropKey", "h-1": "PropType", "1-1": "**PropTypes.bool**\n\nUsed to enable dev menu on Android Nougat device with Cardboard.", "7-1": "**PropTypes.bool**\n\nCalling vrModeEnabled allows switching to and from VR mode. When set to false, it transitions back to pre-VR (mono) mode. When set to true, we set thie view into a full VR mode. This is set to true by default.", "8-1": "PropTypes.arrayOf(PropTypes.number)\n\nPut the PropType Description here.", "9-1": "stylePropType", "10-1": "PropTypes.string\n\nPut the PropType Description here.", "11-1": "PropTypes.arrayOf(PropTypes.string)\n\nPut the PropType Description here.", "12-1": "PropTypes.number\n\nPut the PropType Description here.", "13-1": "PropTypes.bool\n\nPut the PropType Description here.", "6-0": "**viroAppProps**", "6-1": "**PropTypes.object**\n\nA javascript object containing properties for this viro app. One use would be to pass in properties from native if you're using a hybrid applications.", "3-0": "**onExitViro**", "3-1": "**PropTypes.func**\n\nCalled if the user presses the \"X\" button to exit.", "2-0": "**hdrEnabled**", "2-1": "**PropTypes.bool**\n\nWhen HDR rendering is enabled, Viro uses a deeper color space and renders to a floating point texture, then applies a tone-mapping algorithm to preserve fine details in both bright and dark regions of the scene. If HDR is disabled, then features like Bloom and PBR will not work, and tone-mapping will be disabled.\n\nHDR is not supported on all devices.", "4-0": "**pbrEnabled**", "0-0": "**bloomEnabled**", "5-0": "**shadowsEnabled**", "0-1": "**PropTypes.bool**\n\nEnable or disable bloom. Bloom adds a soft glow to bright areas in scene, simulating the way bright highlights appear to the human eye. To make an object bloom, this property must be enabled, and the objects's threshold for bloom must be set via its material's ```bloomThreshold``` property.", "4-1": "**PropTypes.bool**\n\nEnable or disable physically-based rendering. Physically based rendering, or PBR, produces more realistic lighting results for your scenes, and provides a more intuitive workflow for artists. To use PBR, this property must be enabled, and materials must use the ```physicallyBased``` lighting model. PBR is controlled by a variety of properties, see [PBR guide](doc:physically-based-rendering) for details.", "5-1": "**PropTypes.bool**\n\nEnable or disable rendering dynamic shadows. If shadows are disabled here, shadow casting lights will simply not cast a shadow." }, "cols": 2, "rows": 8 } [/block] [block:api-header] { "type": "basic", "title": "Methods" } [/block] The following functions are available on the `ViroVRSceneNavigator` component. You can get the handle to the `ViroVRSceneNavigator` in 2 ways: 1. Use the built-in React Native `ref` property to grab a reference 2. From your `ViroScene`. Each `ViroScene` added to a `ViroVRSceneNavigator` provides its parent navigator in the variable: `this.props.sceneNavigator`. [block:parameters] { "data": { "0-0": "Push the given scene onto scene stack, displaying the scene to the user.\n\n|Parameters | Description | \n| ------------- |:------------- |\n|scene | Scene that will be pushed onto the stack and displayed to the user |", "h-0": "push(scene: ViroScene)" }, "cols": 1, "rows": 1 } [/block] [block:parameters] { "data": { "h-0": "pop()", "0-0": "Pop the top most scene of the stack, effectively going back to the previous scene." }, "cols": 1, "rows": 1 } [/block] [block:parameters] { "data": { "h-0": "pop(n: number)", "0-0": "Go back n scenes at once. If n is equal to 1 this is equivalent to calling pop()." }, "cols": 1, "rows": 1 } [/block] [block:parameters] { "data": { "h-0": "jump(scene: ViroScene)", "0-0": "Move to the given scene in the stack, removing it from its current position in the stack and placing it on top, thereby displaying it to the user. If the scene is not already on the stack, this method pushes the scene to the top of the stack, displaying it to the user. This is best used in applications where the user jumps between a set of scenes frequently.\n\n|Parameters | Description | \n| ------------- |:------------- |\n|scene | Scene that will be moved or pushed to the top of the stack and displayed to the user |" }, "cols": 1, "rows": 1 } [/block] [block:parameters] { "data": { "0-0": "Replace the currently displayed scene (the scene at the top of the stack) with the given scene, displaying it to the user. This leaves the remainder of the stack unchanged.\n\n|Parameters | Description | \n| ------------- |:------------- |\n|scene | Scene that will replace the scene at the top of stack and be displayed to the user |", "h-0": "replace(scene: ViroScene)" }, "cols": 1, "rows": 1 } [/block] [block:parameters] { "data": { "h-0": "recenterTracking()", "0-0": "Reorients the virtual world such that directly forward of the user is [0, 0, -1] by rotating the scene by the user's y-rotation." }, "cols": 1, "rows": 1 } [/block]