Intro to VR in React Native with ViroReact

Prerequisites:

Make sure you have these already installed in your system:

• Node

• watchman

• ngrok

ViroReact

ViroReact is an open-source platform by Viro Media built to develop AR/VR applications with React Native. ViroReact uses ARCore and ARKit behind the curtain. ARCore is the AR development platform for Android, while ARKit is the iOS equivalent. ARCore and ArKit utilize the output of the device’s accelerometer and gyroscope for mapping the virtual world per device movement, this gives the user the illusion of navigating the real world.

It’s worth noting that ARCore and ARKit only support a few devices:

• Devices that work with AR Core

• ARKit-enabled devices

However, because we’re working with virtual reality, the standards are a little more lenient. You should be fine if you have a device that was released within the last three to five years.

ViroReact is made up of two primary parts:

• ViroReact includes a number of specialized React components that allow you to render various scenarios, objects, and controls in a 3D environment.

• ViroReact is a high-performance native 3D rendering engine that uses native device hardware acceleration to render all objects. Despite the fact that we’re using React Native, the performance is actually quite decent.

App Overview:

The application we’ll be making is a virtual reality app with a forest as the background, an image, and text. We’ll also animate the image to make it bigger. This is how it appears:

App Setup:

The Viro CLI must first be downloaded and installed. This allows you to create a React Native project with all of the dependencies required to run VR/AR apps.

npm install -g react-viro-cli

Next, create a new project:

react-viro init TutorialProject

Now that the setup is done you can run the metro builder by running,

npm start

When you create a new project with the Viro CLI tool, it comes with a sample app. The Viro Media app (iOS, Android) can be used to run the app.

Building App:

As you see, when you create an app with ViroReact CLI you get a sample program named “Hello World.” Now we just need to tweak this sample app to achieve our objective.
To further develop the app, the first step would have been to add the API key, which used to be essential for the app to work. But since ViroReact became open-source you can now use it without an API key.

1
2
3
4
// App.js
var sharedProps = {
  apiKey: "YOUR VIRO MEDIA API KEY",
}

You can now look around in the app on your device. Make sure that live reload is enabled so that any changes you make are reflected promptly when you save.
Edit the code once you’ve figured out what’s going on and how the sample program works. It allows you to choose the type of experience you wish to have first (whether VR or AR). We will alter the render function to return the VRNavigator: since we want to leap immediately into VR.

1
2
3
render() {
  return this._getVRNavigator(); // replace everything inside render() with this
}

The scene navigation for the VR experience is rendered as a result of this. The scene navigator is where all Viro apps begin. ViroVRSceneNavigator (for VR) and ViroARSceneNavigator (for AR) are the only two options.

1
2
3
4
// App.js
import {
  ViroVRSceneNavigator
} from 'react-viro';

Returning to the _getVRNavigator() function, the ViroVRSceneNavigator component is simply rendered.

1
2
3
4
5
6
// App.js
_getVRNavigator() {
  <ViroVRSceneNavigator
{...this.state.sharedProps}
initialScene={{scene: InitialVRScene}}/>
}

This scene navigator’s initialScene is the scene that will be displayed. Consider scenes to be the app’s pages. The concept is the same if you’ve ever used React Navigation to navigate between your app’s pages. The scene we’re using is in a separate file, which we imported directly after the API key declaration.

var InitialVRScene = require('./js/HelloWorldScene');

js/HelloWorldScene.js should now be open. To begin, import all of the Viro components we’ll be using. As we go along you’ll discover what each one does.

1
2
3
4
5
import {
  ViroScene,
  ViroText,
  Viro360Image,
} from "react-viro";

Here’s the render method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
render() {
  return (
    <ViroScene>
     <Viro360Image source={require("./res/360_forest.jpg")} />
     <ViroText
       text="Hello World!"
       width={5}
       height={4}
       position={[0, 0, -2]}
       style={styles.textStyle}
     />
   </ViroScene>
  );
}

Let’s have a look at the code above. Every scene in ViroReact must have a top-most component that surrounds everything inside of it. One such component is ViroScene. It enables the creation of a 3D environment, allowing us to use components such as the Viro360Image.
The Viro360Image component is used to display a 360-degree photosphere, as its name suggests. This makes use of the device’s gyroscope to show a specific part of the image based on the device’s current orientation.

<Viro360Image source={require("./res/360_park.jpg")} />

The image we are using above is downloaded from ViroReact media. You can also download 360 images from various sources on the Internet.

The ViroText component comes next. This is used to show text, just like the text component in React Native. We’re using the same size and positioning properties on this component as we did on the ViroImage component.

1
2
3
4
5
6
7
<ViroText
    text="Hello World!"
    width={2}
    height={2}
    position={[0, 0, -2]}
    style={styles.helloWorldTextStyle}
/>

Lastly, we add the styles:

1
2
3
4
5
6
7
8
9
var styles = StyleSheet.create({
  helloWorldTextStyle: {
    fontFamily: 'Arial',
    fontSize: 60,
    color: '#ffffff',
    textAlignVertical: 'center',
    textAlign: 'center',
  },
});

Here’s what it will look like once you run the app: