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.
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.
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".
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.
cd ViroSample npm install -S -E react-viro
Copy the files from
This should override the
App.js files and add
rn-cli.config.js and a
js/ directory to your ViroSample project.
App.js file and add your API key you got when you signed up (or go ahead and sign up on our website).
Install the Viro Media app from the app store on your device. The app is free.
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.
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
- Open the Viro Media App on your phone
- Pull out the left panel and select "Enter Testbed"
- 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).
- type in your local IP address and hit "Go".
- 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!
- Want to learn more about ViroReact? Check out our tutorials:
- Tutorial VR or Tutorial AR where we go through how to modify the Hello World Scenes.
AR Tutorial Blog Posts
- How to build an interactive AR app in 5 mins w/ React Native & Viro AR
- How to build AR Portals in 5 mins w/ React Native & Viro AR
- Add Snapchat-like AR Lenses to any app w/ Viro AR in React Native
- How to use Particles to enhance your AR app using ARKit & React Native
VR Tutorial Blog Posts