{"_id":"5b8469e2146f290003ee250a","category":{"_id":"5b8469e2146f290003ee24fb","version":"5b8469e2146f290003ee2585","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-10-25T23:36:45.975Z","from_sync":false,"order":0,"slug":"basics","title":"Getting Started"},"user":"57bb7e47afc18c0e00529cf3","project":"578c4badbd223d2000cc1441","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":"2016-11-01T23:57:08.648Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"# Using the Testbed Apps (No Xcode/Android Studio required)\n\nA key benefit of ViroReact is that the source need not be compiled and packaged into an application's binary in order to run. ViroReact provides a testbed feature in our Viro Media app which allows you to develop and test your ViroReact 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 towards 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.js` or 'app.js' file with a component named 'ViroSample'. If you use the react-viro script to create a project named 'ViroSample', then this file will be created for you.\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. In your terminal, look for the ngrok URL that was created after running npm start (see image below for example), enter it into the text field on the Testbed screen, then press \"Go\"\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/6405a57-ngrok_example.png\",\n        \"ngrok example.png\",\n        428,\n        70,\n        \"#cccccc\"\n      ]\n    }\n  ]\n}\n[/block]\n**Using IP vs ngrok:** if you would like to use your local IP rather than ngrok\n\nFind 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\n6. Your ViroReact application should now load and run in the Testbed.\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\n# Reloading Features\n\nViroReact 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 (or higher) w/ Cardboard must set `debug={true}` on SceneNavigator \\nwithin your `App.js` file for the debug menu to appear. Otherwise, you must use `adb shell input text rr` to reload.\\n\\nAndroid devices running Nougat OS (or higher) w/ Daydream must reload using ADB with the command: `adb shell input text rr`\",\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\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":"Testbed Apps"}
# Using the Testbed Apps (No Xcode/Android Studio required) A key benefit of ViroReact is that the source need not be compiled and packaged into an application's binary in order to run. ViroReact provides a testbed feature in our Viro Media app which allows you to develop and test your ViroReact 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 towards 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.js` or 'app.js' file with a component named 'ViroSample'. If you use the react-viro script to create a project named 'ViroSample', then this file will be created for you. 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. In your terminal, look for the ngrok URL that was created after running npm start (see image below for example), enter it into the text field on the Testbed screen, then press "Go" [block:image] { "images": [ { "image": [ "https://files.readme.io/6405a57-ngrok_example.png", "ngrok example.png", 428, 70, "#cccccc" ] } ] } [/block] **Using IP vs ngrok:** if you would like to use your local IP rather than ngrok 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. 6. Your ViroReact application should now load and run in the Testbed. **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. # Reloading Features ViroReact 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 (or higher) w/ Cardboard must set `debug={true}` on SceneNavigator \nwithin your `App.js` file for the debug menu to appear. Otherwise, you must use `adb shell input text rr` to reload.\n\nAndroid devices running Nougat OS (or higher) w/ Daydream must reload using ADB with the command: `adb shell input text rr`", "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. **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.