Guides

Quick Start (Windows)

TODO: Does the quick start still hold up?

Suggest Edits

🚧

Using a Mac or Linux laptop/desktop?

Find instructions at Quick Start (Mac/Linux)

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 @viro-community/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.

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

Congratulations, you now have ViroReact set up and running!

Next Steps/Other Resources

  1. Want to learn more about ViroReact? Check out our tutorials:

AR Tutorial Blog Posts

VR Tutorial Blog Posts

  1. New to React Native? Check out the React Native Tutorial which goes over some basic concepts of React Native which we leverage.

  2. Check out our code samples on Github to see what else you can build with ViroReact -> Viro Github

Updated almost 3 years ago