If React VR doesn't support a feature that you need, you can build it yourself.
This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists.
One example of using Native Modules is to support interaction between a React VR UI element and a custom Three.js object that you've added to your scene, for example a geometric cube similar to the one in the Three.js README.
The React VR framework can handle the camera and renderer setup for you, so you only need to focus on adding objects to your scene and animating them. First, we create the scene in the
init function of
vr/client.js (one of the files provided as part of the Starter Project) and provide it as an option to the
VRInstance constructor. We also create
CubeModule, a Native Module described later in this section.
Next, we create the cube mesh and add it to the scene. We use the same Three.js operations as we normally would, with a couple modifications which are often necessary to make Three.js objects appear correctly in React VR.
Above, we also initialize the
cubeModule with a handle to the cube. Finally, add the per-frame update logic into the
Let's say we want the cube to change color based on UI interaction such as a button click. Here is a Native Module that implements the
changeCubeColor function, which is called asynchronously across the React Native bridge. The
init methods are called directly in
client.js to setup the module, as shown above.
Now we can call the
changeCubeColor method from
index.vr.js, for example in an
CubeSample for the full code of this example.
By implementing a native view you can control how the properties specified in your React VR code interact with the runtime code, this could be visual representation or even sound.
To create a native view you will need to import the main module
Then create a class that extends the
RCTBaseView, the constructor should create the
OVRUI.UIView and register getters and setters on any properties.
The class also implements a static
describe function which the runtime uses to determine which properties should be sent from the React VR code to the runtime, these are the runtime implementation of the PropTypes.
Finally, the custom views must be registered to the React VR context and this is handled by provided a list of available
customViews when creating
To make this
TestLight component available to React VR code it is necessary to register a component which makes use of the
propTypes will need to have been set to enable the propTypes to be handled by the React VR core,
viewConfig is used to support the
Animated modules and the
render function should return a component created using the
requireNativeComponent utility function.
You can file an issue on GitHub if you see a typo or error on this page!