• AR Core supported devices
• ARKit supported devices

• React components for VR and AR development - ViroReact comes with a number of custom React components that allow you to render different scenes, objects, and controls in a 3D environment.
• High-performance native 3D rendering engine - ViroReact renders all objects with native device hardware acceleration. This means that the performance is actually good even though we’re using React Native.

npm install -g react-viro-cli  

react-viro init RNViro --verbose  

cd RNViro  
./setup-ide.sh --android

npm start  

react-native run-android --variant=gvrDebug  

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

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

// App.js
import {  
  ViroVRSceneNavigator
} from 'react-viro';

// App.js
_getVRNavigator() {  
  <ViroVRSceneNavigator 
{...this.state.sharedProps}
initialScene={{scene: InitialVRScene}}/>  
}

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

import {  
  ViroScene,
  ViroText,
  ViroImage,
  Viro360Image,
  ViroAnimations
} from "react-viro";

render() {  
    return (
      <ViroScene>
        <Viro360Image source={require("./res/360_park.jpg")} />
        <ViroImage
          height={1}
          width={1}
          position={[0, 0, -4]}
          source={require("./res/logo-jscrambler.jpeg")}
          animation={{ name: "animateImage", run: this.state.runAnimateImage }}
        />
        <ViroText
          text="Protect the client side!"
          width={6}
          height={5}
          position={[0, 0, -2]}
          style={styles.textStyle}
          outerStroke={{ type: "Outline", width: 8, color: "#333" }}
        />
      </ViroScene>
    );
  }

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

<ViroImage  
height={1}  
width={1}  
position={[0, 0, -4]}  
source={require("./res/logo-jscrambler.jpeg")}  
animation={{ name: "animateImage", run: this.state.runAnimateImage }}  
/>

• height and width - the height and width of the image in 3D space. The default value for this is 1 which basically means it will render the full size of the image. 2 means it will double, and so on. It’s best to resize the image in the size you wish to display it beforehand, and then preview it to make sure it’s not pixelated.
• position - the cartesian position of the image in 3D space (x, y, and z positions). We’re used to the x and y positions, which represent the first and second values. But, in a 3D environment, there’s also a z dimension. This represents how near or far the image within the viewing range. 0 means it’s just at the center of the viewing range, so -4 means it’s way back. This makes the user perceive the image as being far. Supplying a number that’s greater than 0 will make the image appear as if it was right in front of the user’s face. One thing that you need to remember about positioning is that 0 means center.
• source - this is the same as the default React Native Image component. So you can either specify a local asset or a URL. In this case, it’s a local asset.
• animation - the animation you want to perform to the image. This accepts an object containing the name of the animation, and boolean value run for specifying whether to run the animation or not. In this case, we’re using a value from the state to control when exactly it will animate. Later on, you’ll learn how we actually declare the name of the animation.

<ViroText  
text="Protect the client side!"  
width={6}  
height={5}  
position={[0, 0, -2]}  
style={styles.textStyle}  
outerStroke={{ type: "Outline", width: 8, color: "#333" }}  
/>

ViroAnimations.registerAnimations({  
    animateImage: {
      properties: { scaleX: 2, scaleY: 0.8 },
      easing: "EaseIn",
      duration: 3000
    }
  });

constructor() {  
    super();
    this.state = {
      runAnimateImage: false
    }; 
}

componentDidMount() {  
    setTimeout(() => {
      this.setState({ runAnimateImage: true });
    }, 5000);
}

var styles = StyleSheet.create({  
    textStyle: {
        fontFamily: "Arial",
        fontSize: 20,
        color: "#ffffff",
        textAlignVertical: "center",
        textAlign: "center"
    }
});