App.js

/**
 * Copyright (c) 2017-present, Viro, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  StyleSheet,
  PixelRatio,
  TouchableHighlight,
} from 'react-native';

import {
  ViroVRSceneNavigator,
  ViroARSceneNavigator
} from 'react-viro';

/*
 TODO: Insert your API key below
 */

var sampleAPI = 'SDKSDV09-KD03-KNLD-SDVSNDNLNV233'; //Which you need to use your own personal API here.

var sharedProps = {
  apiKey: sampleAPI,
}

// Sets the default scene you want for AR and VR
// var InitialARScene = require('./js/HelloWorldSceneAR');
// var InitialVRScene = require('./js/HelloWorldSceneVR');


// Demo pages initialization
import InitialARTextScene from './js/TextScene';
import InitialARPlaneSelector from './js/ARPlaneSelector';
import InitialPortalScene from './js/PortalScene';
import InitialBusinessCardScene from './js/BusinessCardImage';


var UNSET = "UNSET";
var VR_NAVIGATOR_TYPE = "VR";
var AR_NAVIGATOR_TYPE = "AR";

//Navigatoin page variables 
let AR_TEXT_NAVIGATOR_TYPE = "TEXT_AR";
let AR_PLANE_SELECTOR_NAVIGATOR_TYPE = "AR_PLANE_SELECTOR";
let AR_PORTAL_NAVIGATOR_TYPE = "AR_PORTAL";
let AR_BUSINESSCARD_NAVIGATOR_TYPE = "AR_BUSINESSCARD";


// This determines which type of experience to launch in, or UNSET, if the user should
// be presented with a choice of AR or VR. By default, we offer the user a choice.
var defaultNavigatorType = UNSET;

export default class ViroSample extends Component {
  constructor() {
    super();

    this.state = {
      navigatorType: defaultNavigatorType,
      sharedProps: sharedProps
    }

    // this._getARNavigator = this._getARNavigator.bind(this);
    // this._getVRNavigator = this._getVRNavigator.bind(this);
    this._getExperienceSelector = this._getExperienceSelector.bind(this);
    this._getExperienceButtonOnPress = this._getExperienceButtonOnPress.bind(this);
    this._getARTextNavigator = this._getARTextNavigator.bind(this);
    this._getARPlaneSelectorNavigator = this._getARPlaneSelectorNavigator.bind(this);
    this._getARPortalNavigator = this._getARPortalNavigator.bind(this);
    this._getARBusinessCardNavigator = this._getARBusinessCardNavigator.bind(this);
    this._exitViro = this._exitViro.bind(this);
  }

  // Replace this function with the contents of _getVRNavigator() or _getARNavigator()
  // if you are building a specific type of experience.
  render() {
    if (this.state.navigatorType == UNSET) {
      return this._getExperienceSelector();
    }
    // else if (this.state.navigatorType == VR_NAVIGATOR_TYPE) {
    //   return this._getVRNavigator();
    // } else if (this.state.navigatorType == AR_NAVIGATOR_TYPE) {
    //   return this._getARNavigator();
    // } 

    else if (this.state.navigatorType == AR_TEXT_NAVIGATOR_TYPE) {
      return this._getARTextNavigator();
    } else if (this.state.navigatorType == AR_PLANE_SELECTOR_NAVIGATOR_TYPE) {
      return this._getARPlaneSelectorNavigator();
    } else if (this.state.navigatorType == AR_PORTAL_NAVIGATOR_TYPE) {
      return this._getARPortalNavigator();
    } else if (this.state.navigatorType == AR_BUSINESSCARD_NAVIGATOR_TYPE) {
      return this._getARBusinessCardNavigator();
    }

  }

  // Presents the user with a choice of an AR or VR experience
  _getExperienceSelector() {
    return (
      <View style={localStyles.outer}>
        <View style={localStyles.inner}>

          <Text style={localStyles.titleText}>
            Choose your desired experience:
          </Text>

          <TouchableHighlight style={localStyles.buttons}
            onPress={this._getExperienceButtonOnPress(AR_TEXT_NAVIGATOR_TYPE)}
            underlayColor={'#68a0ff'} >
            <Text style={localStyles.buttonText}>TextScene AR</Text>
          </TouchableHighlight>

          <TouchableHighlight style={localStyles.buttons}
            onPress={this._getExperienceButtonOnPress(AR_PLANE_SELECTOR_NAVIGATOR_TYPE)}
            underlayColor={'#68a0ff'} >
            <Text style={localStyles.buttonText}>AR Place Selector</Text>
          </TouchableHighlight>

          <TouchableHighlight style={localStyles.buttons}
            onPress={this._getExperienceButtonOnPress(AR_PORTAL_NAVIGATOR_TYPE)}
            underlayColor={'#68a0ff'} >
            <Text style={localStyles.buttonText}>Portal AR</Text>
          </TouchableHighlight>

          <TouchableHighlight style={localStyles.buttons}
            onPress={this._getExperienceButtonOnPress(AR_BUSINESSCARD_NAVIGATOR_TYPE)}
            underlayColor={'#68a0ff'} >
            <Text style={localStyles.buttonText}>Business Card AR</Text>
          </TouchableHighlight>

        </View>
      </View>
    );
  }

  // Returns the ViroARSceneNavigator which will start the AR experience
  // _getARNavigator() {
  //   return (
  //     <ViroARSceneNavigator {...this.state.sharedProps}
  //       initialScene={{ scene: InitialARScene }} />
  //   );
  // }

  _getARTextNavigator() {
    return (
      <ViroARSceneNavigator {...this.state.sharedProps}
        initialScene={{ scene: InitialARTextScene }} />
    );
  }

  _getARPlaneSelectorNavigator() {
    return (
      <ViroARSceneNavigator {...this.state.sharedProps}
        initialScene={{ scene: InitialARPlaneSelector }} />
    );
  }

  _getARPortalNavigator() {
    return (
      <ViroARSceneNavigator {...this.state.sharedProps}
        initialScene={{ scene: InitialPortalScene }} />
    );
  }

  _getARBusinessCardNavigator() {
    return (
      <ViroARSceneNavigator {...this.state.sharedProps}
        initialScene={{ scene: InitialBusinessCardScene }} />
    );
  }




  // Returns the ViroSceneNavigator which will start the VR experience
  // _getVRNavigator() {
  //   return (
  //     <ViroVRSceneNavigator {...this.state.sharedProps}
  //       initialScene={{ scene: InitialVRScene }} onExitViro={this._exitViro} />
  //   );
  // }

  // This function returns an anonymous/lambda function to be used
  // by the experience selector buttons
  _getExperienceButtonOnPress(navigatorType) {
    return () => {
      this.setState({
        navigatorType: navigatorType
      })
    }
  }

  // This function "exits" Viro by setting the navigatorType to UNSET.
  _exitViro() {
    this.setState({
      navigatorType: UNSET
    })
  }
}

var localStyles = StyleSheet.create({
  viroContainer: {
    flex: 1,
    backgroundColor: "black",
  },
  outer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: "black",
  },
  inner: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    backgroundColor: "black",
  },
  titleText: {
    paddingTop: 30,
    paddingBottom: 20,
    color: '#fff',
    textAlign: 'center',
    fontSize: 25
  },
  buttonText: {
    color: '#fff',
    textAlign: 'center',
    fontSize: 20
  },
  buttons: {
    padding: 25,
    marginTop: 10,
    marginBottom: 10,
    backgroundColor: '#68a0cf',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#fff',
  },
  exitButton: {
    height: 50,
    width: 100,
    paddingTop: 10,
    paddingBottom: 10,
    marginTop: 10,
    marginBottom: 10,
    backgroundColor: '#68a0cf',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#fff',
  }
});

module.exports = ViroSample;