custom-view-index.vr.js

import React from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';

import {
  AppRegistry,
  asset,
  Pano,
  DirectionalLight,
  View,
} from 'react-vr';

// Import all necessary libraries
// Note - these libs are available in index.vr.js,
// you can't use them in your own files
const NativeMethodsMixin = require('NativeMethodsMixin');
const StyleSheetPropType = require('StyleSheetPropType');
const LayoutAndTransformColorPropTypes = require('LayoutAndTransformColorPropTypes');
const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
const requireNativeComponent = require('requireNativeComponent');

// Create React class for TorusKnot
const TorusKnot = createReactClass({
  mixins: [NativeMethodsMixin],

  propTypes: {
    ...View.propTypes,
    style: StyleSheetPropType(LayoutAndTransformColorPropTypes),
  },

  viewConfig: {
      uiViewClassName: 'Mesh',
      validAttributes: {
        ...ReactNativeViewAttributes.RCTView,
      },
    },

    getDefaultProps() {
      return {};
    },

    render() {
      return (
        <RKTorusKnot {...this.props} />
      );
    },
});

// Make TorusKnot as native component
const RKTorusKnot = requireNativeComponent('TorusKnot', TorusKnot, {
  nativeOnly: {},
});

export default class WelcomeToVR extends React.Component {
  render() {
    return (
      <View>
        <Pano source={asset('pano2.jpg')}/>

        {/* Add some light */}
        <DirectionalLight />

        {
        /*
         * Add TorusKnot component,
         * move it forward and set it's
         * color to 'red'
         */
        }
        <TorusKnot
          style={{
            transform: [{
              translate: [0, 0, -4.5],
            }],
            color: '#ff0000'
          }}
        />
      </View>
    );
  }
};

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