{"_id":"58f7a4c9cbd001190056cc2f","version":{"_id":"58f7a4c8cbd001190056cbf8","__v":1,"project":"578c4badbd223d2000cc1441","createdAt":"2017-04-19T17:56:24.172Z","releaseDate":"2017-04-19T17:56:24.172Z","categories":["58f7a4c8cbd001190056cbf9","58f7a4c8cbd001190056cbfa","58f7a4c8cbd001190056cbfb","58f7a4c8cbd001190056cbfc","58f7a4c8cbd001190056cbfd","58f7a4c8cbd001190056cbfe"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1.0"},"category":{"_id":"58f7a4c8cbd001190056cbfc","__v":0,"version":"58f7a4c8cbd001190056cbf8","project":"578c4badbd223d2000cc1441","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-18T21:08:45.730Z","from_sync":false,"order":3,"slug":"develop","title":"Develop"},"user":"57bb7e47afc18c0e00529cf3","project":"578c4badbd223d2000cc1441","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-11-01T23:57:08.648Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"At this point, you should have completed the steps in [Quick Start](doc:quick-start) or [Installing Viro](doc:starting-a-new-viro-project-1) and are ready to start developing your own application. Below are a few pointers when it comes to developing with Viro.\n\n# Reloading Features\n\nViro supports React Native's reloading features, which enable fast iteration without recompiling. In order to take advantage of these features, open your application and, within any scene, shake the device until the debug menu appears.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"Android devices running Nougat OS w/ Daydream must reload using ADB with the command: `adb shell input text rr`\\n\\nAndroid devices running Nougat OS w/ Cardboard must set `debug={true}` on SceneNavigator \\nwithin your `index.android.js` file for the debug menu to appear.\",\n  \"title\": \"Reloading on Android Devices\"\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/c758272-viro_debug_hud.jpg\",\n        \"viro_debug_hud.jpg\",\n        800,\n        450,\n        \"#c4c4c5\"\n      ],\n      \"sizing\": \"80\"\n    }\n  ]\n}\n[/block]\nIn this menu there are two options for reloading:\n\n1. **Reload**: manually force the scene to immediately reload from the package server.\n2. **Enable Live Reloading**: when Live Reloading is turned on, the entire application will be reloaded automatically (from the start) whenever any Javascript file tracked by the package server is saved on disk. To disable Live Reloading, shake the device to bring up the debug menu and tap Disable Live Reloading.\n\n# Using the Testbed App (No Xcode/Android Studio required)\n\nA key benefit of Viro is that the source need not be compiled and packaged into an application's binary in order to run. As a result, we have provided a testbed feature in our marquee Viro Media app which allows you to develop and test your Viro application without having to use Xcode or Android Studio. Instead, all you have to do is set up your package server to serve your Javascript files, and point the Viro Media app toward it. To do this:\n\n1. Install the Viro Media App from the [AppStore](https://itunes.apple.com/us/app/viro-media/id1163100576?mt=8) on your iOS device, or from the [Play Store](https://play.google.com/store/apps/details?id=com.viromedia.viromedia) for your Android device.\n2. The Testbed application looks for an `index.ios.js` file with a component named 'ViroSample'. If you use the react-viro script to create a project named 'ViroSample', then this index.ios.js file will be created for you. If you're using a different project, then you'll have to register your root component as ViroSample in your index.ios.js file (.e.g, `AppRegistry.registerComponent('ViroSample', () => [YOUR COMPONENT]);` \n3. From the root of your project, run the command: `npm start` to start the packager server.\n4. Launch the Viro Media App, open the left panel and tap \"Enter Testbed\"\n5. Find your ngrok URL, enter it into the text field on the Testbed screen, then press \"Go\"\n    * Your ngrok URL will be printed at the top of the window where you ran `npm start`\n6. Your Viro application should now load and run in the Testbed.\n\n**Using IP vs ngrok:** if you would like to use your local IP rather than ngrok, use the alternate step 5 below.\n\n5. Find your local IP, enter it into the text field on the Testbed screen, then press \"Go\"\n    * Your local IP address can be found by running the command `ifconfig` in the terminal. Keep in mind you need your *local* IP address, not your public one.\n\n**Note:** If you're connecting via IP, then ensure your device and development machine are on the same network. We recommend using ngrok for better connectivity.\n\n**Troubleshooting:** Ensure your `react-viro` version in your project's package.json file matches the version at the bottom of the Testbed screen.\n* If they do not match, then you may need to either update your Viro Media App **or** downgrade your react-viro version in your package.json.","excerpt":"","slug":"develop-with-viro","type":"basic","title":"Developing with Viro"}

Developing with Viro


At this point, you should have completed the steps in [Quick Start](doc:quick-start) or [Installing Viro](doc:starting-a-new-viro-project-1) and are ready to start developing your own application. Below are a few pointers when it comes to developing with Viro. # Reloading Features Viro supports React Native's reloading features, which enable fast iteration without recompiling. In order to take advantage of these features, open your application and, within any scene, shake the device until the debug menu appears. [block:callout] { "type": "info", "body": "Android devices running Nougat OS w/ Daydream must reload using ADB with the command: `adb shell input text rr`\n\nAndroid devices running Nougat OS w/ Cardboard must set `debug={true}` on SceneNavigator \nwithin your `index.android.js` file for the debug menu to appear.", "title": "Reloading on Android Devices" } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/c758272-viro_debug_hud.jpg", "viro_debug_hud.jpg", 800, 450, "#c4c4c5" ], "sizing": "80" } ] } [/block] In this menu there are two options for reloading: 1. **Reload**: manually force the scene to immediately reload from the package server. 2. **Enable Live Reloading**: when Live Reloading is turned on, the entire application will be reloaded automatically (from the start) whenever any Javascript file tracked by the package server is saved on disk. To disable Live Reloading, shake the device to bring up the debug menu and tap Disable Live Reloading. # Using the Testbed App (No Xcode/Android Studio required) A key benefit of Viro is that the source need not be compiled and packaged into an application's binary in order to run. As a result, we have provided a testbed feature in our marquee Viro Media app which allows you to develop and test your Viro application without having to use Xcode or Android Studio. Instead, all you have to do is set up your package server to serve your Javascript files, and point the Viro Media app toward it. To do this: 1. Install the Viro Media App from the [AppStore](https://itunes.apple.com/us/app/viro-media/id1163100576?mt=8) on your iOS device, or from the [Play Store](https://play.google.com/store/apps/details?id=com.viromedia.viromedia) for your Android device. 2. The Testbed application looks for an `index.ios.js` file with a component named 'ViroSample'. If you use the react-viro script to create a project named 'ViroSample', then this index.ios.js file will be created for you. If you're using a different project, then you'll have to register your root component as ViroSample in your index.ios.js file (.e.g, `AppRegistry.registerComponent('ViroSample', () => [YOUR COMPONENT]);` 3. From the root of your project, run the command: `npm start` to start the packager server. 4. Launch the Viro Media App, open the left panel and tap "Enter Testbed" 5. Find your ngrok URL, enter it into the text field on the Testbed screen, then press "Go" * Your ngrok URL will be printed at the top of the window where you ran `npm start` 6. Your Viro application should now load and run in the Testbed. **Using IP vs ngrok:** if you would like to use your local IP rather than ngrok, use the alternate step 5 below. 5. Find your local IP, enter it into the text field on the Testbed screen, then press "Go" * Your local IP address can be found by running the command `ifconfig` in the terminal. Keep in mind you need your *local* IP address, not your public one. **Note:** If you're connecting via IP, then ensure your device and development machine are on the same network. We recommend using ngrok for better connectivity. **Troubleshooting:** Ensure your `react-viro` version in your project's package.json file matches the version at the bottom of the Testbed screen. * If they do not match, then you may need to either update your Viro Media App **or** downgrade your react-viro version in your package.json.