The Viro Developer Hub

Welcome to the Viro developer hub. You'll find comprehensive guides and sample code to help you start working with Viro as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started

Quick Start (Windows)

Using a Mac or Linux laptop/desktop?

Find instructions at Quick Start (Mac/Linux)

Viro Platform requires a key.

Make sure to sign up here to get your key emailed to you.

Install Node and the React Native CLI

Go to the React Native Getting Started guide, switch to the Building Projects with Native Code tab and follow the steps in the first two sections under Installing Dependencies (Node, Python2, JDK and The React Native CLI).

Note: you do not need Android Studio/Xcode to use the testbed application.

Create a new React Native project

Open Powershell and navigate to where you want to create the ViroReact project and run the command

react-native init ViroSample --version=0.59.3

This will create a React Native project in the ViroSample directory.

If you get the Error: MSBUILD : error MSB3428: Could not load the Visual C++ component "VCBuild.exe".

Install the windows-build-tools package through npm:
npm install --global --production windows-build-tools

Then delete the ViroSample directory and re-run the react-native init command.

See this GitHub link for more information.

Add a Dependency on React Viro

Run the following commands in Powershell

cd ViroSample
npm install -S -E react-viro

Copy Files from React Viro

Copy the files from node_modules\react-viro\bin\files\javascript\* to the root of your directory.

This should override the index.js and App.js files and add metro.config.js, rn-cli.config.js and a js/ directory to your ViroSample project.

Add Your API Key

Modify the App.js file and add your API key you got when you signed up (or go ahead and sign up on our website).

Download/Update the Viro Media App

Install the Viro Media app from the app store on your device. The app is free.

iOS
Viro Media App

Android
Viro Media App

If you're developing with ARCore...

You will need to install the ARCore 1.5 APK from the Google Play store. The Viro Media testbed app should prompt you to download ARCore 1.5 if you do not have it on your device already.

Start Your Packager Server

In Powershell, at the root of your new ViroReact project, run "npm start" which should start the React Native packager server.

Note: Make sure your computer and phone are on the same network

Using the Testbed App

  1. Open the Viro Media App on your phone
  2. Pull out the left panel and select "Enter Testbed"
  3. Find the local IP address of your computer (one way is to open another Powershell window and run "ipconfig" and look for the IPv4 Address).
  4. type in your local IP address and hit "Go".
  5. You should now be in a 360 degree photo of a beach with the text "Hello World!" in front of you. If not, then try shaking the device until a development menu appears and hit "Reload" and double-check that the local IP address entered was correct.

Congratulations, you now have ViroReact set up and running!

Next Steps/Other Resources

  1. Want to learn more about ViroReact? Check out our tutorials:
  2. Tutorial VR or Tutorial AR where we go through how to modify the Hello World Scenes.

AR Tutorial Blog Posts

VR Tutorial Blog Posts

Quick Start (Windows)


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.