{"_id":"59bc03d41d2d8d001a3445b8","category":{"_id":"59bc03d31d2d8d001a344581","version":"59bc03d31d2d8d001a34457d","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-18T21:08:45.730Z","from_sync":false,"order":4,"slug":"develop","title":"Develop"},"parentDoc":null,"user":"578c4a62bd223d2000cc143e","project":"578c4badbd223d2000cc1441","version":{"_id":"59bc03d31d2d8d001a34457d","project":"578c4badbd223d2000cc1441","__v":2,"createdAt":"2017-09-15T16:46:11.721Z","releaseDate":"2017-09-15T16:46:11.721Z","categories":["59bc03d31d2d8d001a34457e","59bc03d31d2d8d001a34457f","59bc03d31d2d8d001a344580","59bc03d31d2d8d001a344581","59bc03d31d2d8d001a344582","59bc03d31d2d8d001a344583","59bc284b7c3f420010f965e6"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.0.0","version":"2.0.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-09-13T23:01:36.797Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"The ```<ViroSceneNavigator>``` handles the transitions between ```<ViroScene>``` objects. It enables the 3D equivalent of a navigation stack. \n\nViro displays the scene at the top of the stack. To move to a new scene, simply push that scene onto the navigation stack. To return to the previous scene, pop the current scene off the stack. The Scene Navigator itself can always be retrieved for these operations via each Scene's ```sceneNavigator``` property.\n\nThe following is a simple example. Below we have a ```<ViroSceneNavigator>``` that renders a simple initial scene.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var FirstScene = require('./FirstScene');\\n\\nvar ViroSceneNav = React.createClass({\\n  render: function() {\\n    return (\\n      <ViroSceneNavigator\\n        initialScene={{\\n          scene: FirstScene,\\n        }}\\n      />\\n    );\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nWhen the application is launched, the scene exported in FirstScene.js is displayed. Continuing the example, ```FirstScene``` is a simple scene with an image, shown below. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var SecondScene = require('./SecondScene');\\n\\nvar FirstScene = React.createClass({\\n  render: function() {\\n    return (\\n      <ViroScene>\\n        <ViroImage source={require('../res/image.jpg')} \\n                   position={[0, 0, -5]} \\n                   onClick={this._pushNextScene}/>            \\n      </ViroScene>\\n    );\\n  },\\n  \\n  _pushNextScene(){\\n     this.props.sceneNavigator.push({scene:SecondScene});\\n  },\\n});\\n\\nmodule.exports = FirstScene;\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe image has a click handler ```_pushNextScene()``` which, when pressed, pushes ```SecondScene``` onto the stack. Notice that the Scene Navigator is always available via ```this.props.sceneNavigator```.  \n\nWhen ```SecondScene``` is pushed onto the stack, it will be rendered until either another new scene is pushed onto the stack, or until it is popped off the stack via ```this.props.sceneNavigator.pop()```. \n\n**Important Note: **Ensure that you do not pop the last scene on the stack, this will result in a red screen with a \"Cannot pop below 0\" message in development and a crash in release!\n[block:api-header]\n{\n  \"title\": \"Jumping\"\n}\n[/block]\nIn addition to pushing and popping scenes, you can also ```jump``` between scenes.\n\n```Jump``` is used to quickly move from scene to scene on the navigation stack. If the scene we are jumping toward is already on the stack, we move it to the top, displaying it to the user. If the scene is not already in the stack, we push it to the top.\n\nJumping is useful for applications that frequently switch between a number of scenes. Jumping is also optimized to be faster than doing the same via push and pop.\n\nNote that to jump correctly, each scene requires a *scene key*. The scene key identifies the scene, enabling Viro to recognize when said scene is already on the stack so we can quickly jump to it.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var SecondScene = require('./SecondScene');\\n\\nvar FirstScene = React.createClass({\\n  render: function() {\\n    return (\\n      <ViroScene>\\n        <ViroImage source={require('../res/image.jpg')} \\n                   position={[0, 0, -5]} \\n                   onClick={this._jumpNextScene}/>            \\n      </ViroScene>\\n    );\\n  },\\n  \\n  _jumpNextScene(){\\n     this.props.sceneNavigator.jump(\\\"scene2\\\", {scene:SecondScene});\\n  },\\n});\\n\\nmodule.exports = FirstScene;\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Replacing\"\n}\n[/block]\nFinally, to simply replace the scene at the top of the stack with a different scene, use the ```replace``` method. Replace is useful for applications that have no need for a hierarchical scene stack, and instead simply swap out one scene for another at the root level.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var SecondScene = require('./SecondScene');\\n\\nvar FirstScene = React.createClass({\\n  render: function() {\\n    return (\\n      <ViroScene>\\n        <ViroImage source={require('../res/image.jpg')} \\n                   position={[0, 0, -5]} \\n                   onClick={this._replaceNextScene}/>            \\n      </ViroScene>\\n    );\\n  },\\n  \\n  _replaceNextScene(){\\n     this.props.sceneNavigator.replace({scene:SecondScene});\\n  },\\n});\\n\\nmodule.exports = FirstScene;\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"scene-navigation","type":"basic","title":"Scene Navigation"}
The ```<ViroSceneNavigator>``` handles the transitions between ```<ViroScene>``` objects. It enables the 3D equivalent of a navigation stack. Viro displays the scene at the top of the stack. To move to a new scene, simply push that scene onto the navigation stack. To return to the previous scene, pop the current scene off the stack. The Scene Navigator itself can always be retrieved for these operations via each Scene's ```sceneNavigator``` property. The following is a simple example. Below we have a ```<ViroSceneNavigator>``` that renders a simple initial scene. [block:code] { "codes": [ { "code": "var FirstScene = require('./FirstScene');\n\nvar ViroSceneNav = React.createClass({\n render: function() {\n return (\n <ViroSceneNavigator\n initialScene={{\n scene: FirstScene,\n }}\n />\n );\n }\n});", "language": "javascript" } ] } [/block] When the application is launched, the scene exported in FirstScene.js is displayed. Continuing the example, ```FirstScene``` is a simple scene with an image, shown below. [block:code] { "codes": [ { "code": "var SecondScene = require('./SecondScene');\n\nvar FirstScene = React.createClass({\n render: function() {\n return (\n <ViroScene>\n <ViroImage source={require('../res/image.jpg')} \n position={[0, 0, -5]} \n onClick={this._pushNextScene}/> \n </ViroScene>\n );\n },\n \n _pushNextScene(){\n this.props.sceneNavigator.push({scene:SecondScene});\n },\n});\n\nmodule.exports = FirstScene;", "language": "javascript" } ] } [/block] The image has a click handler ```_pushNextScene()``` which, when pressed, pushes ```SecondScene``` onto the stack. Notice that the Scene Navigator is always available via ```this.props.sceneNavigator```. When ```SecondScene``` is pushed onto the stack, it will be rendered until either another new scene is pushed onto the stack, or until it is popped off the stack via ```this.props.sceneNavigator.pop()```. **Important Note: **Ensure that you do not pop the last scene on the stack, this will result in a red screen with a "Cannot pop below 0" message in development and a crash in release! [block:api-header] { "title": "Jumping" } [/block] In addition to pushing and popping scenes, you can also ```jump``` between scenes. ```Jump``` is used to quickly move from scene to scene on the navigation stack. If the scene we are jumping toward is already on the stack, we move it to the top, displaying it to the user. If the scene is not already in the stack, we push it to the top. Jumping is useful for applications that frequently switch between a number of scenes. Jumping is also optimized to be faster than doing the same via push and pop. Note that to jump correctly, each scene requires a *scene key*. The scene key identifies the scene, enabling Viro to recognize when said scene is already on the stack so we can quickly jump to it. [block:code] { "codes": [ { "code": "var SecondScene = require('./SecondScene');\n\nvar FirstScene = React.createClass({\n render: function() {\n return (\n <ViroScene>\n <ViroImage source={require('../res/image.jpg')} \n position={[0, 0, -5]} \n onClick={this._jumpNextScene}/> \n </ViroScene>\n );\n },\n \n _jumpNextScene(){\n this.props.sceneNavigator.jump(\"scene2\", {scene:SecondScene});\n },\n});\n\nmodule.exports = FirstScene;", "language": "javascript" } ] } [/block] [block:api-header] { "title": "Replacing" } [/block] Finally, to simply replace the scene at the top of the stack with a different scene, use the ```replace``` method. Replace is useful for applications that have no need for a hierarchical scene stack, and instead simply swap out one scene for another at the root level. [block:code] { "codes": [ { "code": "var SecondScene = require('./SecondScene');\n\nvar FirstScene = React.createClass({\n render: function() {\n return (\n <ViroScene>\n <ViroImage source={require('../res/image.jpg')} \n position={[0, 0, -5]} \n onClick={this._replaceNextScene}/> \n </ViroScene>\n );\n },\n \n _replaceNextScene(){\n this.props.sceneNavigator.replace({scene:SecondScene});\n },\n});\n\nmodule.exports = FirstScene;", "language": "javascript" } ] } [/block]