react-vr.js

import React from 'react';
import {
  AppRegistry,
  asset,
  Pano,
  Text,
  View,
  VrButton,
} from 'react-vr';

export default class ReactVR extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentSky: null,
      chessWorld: asset('chess-world.jpg'),
      puydesancy: asset('puydesancy.jpg'),
    }

    this.state.currentSky = this.state.chessWorld
  }
  changeToChess () {
    console.log('change to Chess')
    this.setState({currentSky: this.state.chessWorld})
  }
  changeToPuydesancy () {
    console.log('change to puydesancy')
    this.setState({currentSky: this.state.puydesancy})
  }
  render() {
    return (
      <View>
        <Pano source={this.state.currentSky}/>
        <VrButton
          onClick={() => this.changeToChess()}
        >
          <Text
            style={{
              backgroundColor: '#223860',
              fontSize: 0.2,
              fontWeight: '400',
              layoutOrigin: [0.5, 0.5],
              paddingLeft: 0.2,
              paddingRight: 0.2,
              textAlign: 'center',
              textAlignVertical: 'center',
              transform: [{translate: [0, 0, -3]}],
            }}>
            Change to Chess
          </Text>
        </VrButton>
        <VrButton
          onClick={() => this.changeToPuydesancy()}
        >
          <Text
            style={{
              backgroundColor: '#223860',
              fontSize: 0.2,
              fontWeight: '400',
              layoutOrigin: [0.5, 0.5],
              paddingLeft: 0.2,
              paddingRight: 0.2,
              textAlign: 'center',
              textAlignVertical: 'center',
              marginTop: 0.3,
              transform: [{translate: [0, 0, -3]}],
            }}>
            Change to Puy de Sancy
          </Text>
        </VrButton>
      </View>
    );
  }
};

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