index.ios.js

/**
 The below code adds a "start" screen that asks the user if they have a VR headset
 
 It's written entirely in React-Native and you would just replace your index.ios|android.js
 with this file or add this as another js file referenced by your index.ios|android.js files.
 
 To use this, simply replace:
 YOUR_JS_FILE_HERE - replace with your initial scene (ie. js/testScene1.js)
 YOUR_API_KEY_HERE - replace with your API key
 */

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

import {
  ViroSceneNavigator,
} from 'react-viro';

var InitialVRScene = require('YOUR_JS_FILE_HERE');
var UNSET = "UNSET";

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

    this.state = {
      vrMode : UNSET,
    }
    this._getSelectionButtons = this._getSelectionButtons.bind(this);
    this._getOnClick = this._getOnClick.bind(this);
  }
  render() {
    if (this.state.vrMode == UNSET) {
      return this._getSelectionButtons();
    } else {
      return this._getVRNavigator();
    }
  }
  _getSelectionButtons() {
    return (
      <View style={localStyles.outer} >
        <View style={localStyles.inner} >

          <Text style={localStyles.titleText}>
            Do you have a VR headset?
          </Text>

          <TouchableHighlight style={localStyles.buttons}
            onPress={this._getOnClick(true)}
            underlayColor={'#68a0ff'} >

            <Text style={localStyles.buttonText}>YES</Text>
          </TouchableHighlight>

          <TouchableHighlight style={localStyles.buttons}
            onPress={this._getOnClick(false)}
            underlayColor={'#68a0ff'} >

            <Text style={localStyles.buttonText}>NO</Text>
          </TouchableHighlight>
        </View>
      </View>
    );
  }
  _getVRNavigator() {
    return (
      <ViroSceneNavigator apiKey={"YOUR_API_KEY_HERE"}
        initialScene={{scene: InitialVRScene}} vrModeEnabled={this.state.vrMode} />
    );
  }
  _getOnClick(vrMode) {
    return () => {
      this.setState({
        vrMode : vrMode
      })
    }
  }
}

var localStyles = StyleSheet.create({
  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 : {
    height: 80,
    width: 150,
    paddingTop:20,
    paddingBottom:20,
    marginTop: 10,
    marginBottom: 10,
    backgroundColor:'#68a0cf',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#fff',
  }
});

AppRegistry.registerComponent('ViroSample', () => ViroSample);