GuidesIssuesSupportGet API Key

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 on your iOS device, or from the Play Store 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"

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.

  1. 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.


Reloading on Android Devices

Android devices running Nougat OS (or higher) w/ Cardboard must set debug={true} on SceneNavigator
within your App.js file for the debug menu to appear. Otherwise, you must use adb shell input text rr to reload.

Android devices running Nougat OS (or higher) w/ Daydream must reload using ADB with the command: adb shell input text rr

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.