react-viro-hello-world

gistfile1.txt

import React, { Component } from 'react';
import {
  ViroARScene,
  ViroConstants,
  ViroARSceneNavigator,
  ViroARImageMarker,
  ViroARTrackingTargets,
  ViroVideo
} from '@viro-community/react-viro';

class HelloWorldSceneAR extends Component {

  constructor(props) {
    super(props);
    // Set initial state here
    this.state = {
      text : "Initializing AR...",
      runAnimation: false
    };
    // bind 'this' to functions
    this._onInitialized = this._onInitialized.bind(this);
  }

  render() {
    return (
      <ViroARScene onTrackingUpdated={this._onInitialized}>
        <ViroARImageMarker target={"businessCard"}>
          <ViroVideo
            source={require('./1036333886-preview.mp4')}
            height={2}
            width={2}
            loop={false}
            position={[0,2,-5]}
            paused={true}
          />
        </ViroARImageMarker>
      </ViroARScene>
    );
  }

  _onInitialized(state, reason) {
    if (state == ViroConstants.TRACKING_NORMAL) {
      this.setState({
        text : "Hello World!"
      });
    } else if (state == ViroConstants.TRACKING_NONE) {
      // Handle loss of tracking
    }
  }
}

ViroARTrackingTargets.createTargets({
  "businessCard" : {
    source : require('./business_card.png'),
    orientation : "Up",
    physicalWidth : 0.05 // real world width in meters
  }
});

export default class App extends React.Component{
	render(){
			return(
				<ViroARSceneNavigator
					autofocus={true}
					initialScene={{
						scene: HelloWorldSceneAR,
					}}
					style={{flex: 1}}
				/>
			);
		}
}