Doc Bug / Sample

[jgwinner]

Description

Is this a Bug or a Feature Request?

Document bug / inaccuracy

Expected behavior

I tried to follow the directions at [https://facebook.github.io/react-vr/docs/native-modules.html]

Actual behavior

I get an error:

ReferenceError: process is not defined[Learn More]  index.js:3
    <anonymous> index.js:3
    loadModuleImplementation require.js:174:4
    guardedLoadModule require.js:126:11
    _require require.js:110:2
    <anonymous> TestLight.js:1
    loadModuleImplementation require.js:174:4
    guardedLoadModule require.js:126:11
    _require require.js:110:2
    <anonymous> TestLight.js:2
    loadModuleImplementation require.js:174:4
    guardedLoadModule require.js:126:11
    _require require.js:110:2
    <anonymous> client.js:7
    loadModuleImplementation require.js:174:4
    guardedLoadModule require.js:119:20
    _require require.js:110:2
    <anonymous> http://localhost:8081/vr/client.bundle:69476:2
ReferenceError: ReactVR is not defined[Learn More]  vr:12:7
    <anonymous> http://localhost:8081/vr/:12:7

Reproduction

I created a new application called NativeView

I modified client.js:

// Auto-generated content.
// This file contains the boilerplate to set up your React app.
// If you want to modify your application, start in "index.vr.js"

// Auto-generated content.
import { VRInstance } from 'react-vr-web';
import { RCTTestLight } from './Views/TestLight.js';

function init(bundle, parent, options) {
  const vr = new VRInstance(bundle, 'NativeView', parent, {
    // Add custom options here
    customViews: [{ name: 'TestLight', view: RCTTestLight }],
    ...options,
  });
  vr.render = function() {
    // Any custom behavior you want to perform on each frame goes here
  };
  // Begin the animation loop
  vr.start();
  return vr;
}

window.ReactVR = {init};

I then created two files, both called TestLight.js, one in vr/views, the other in vr/components.

I'm attaching these files - I prefixed the directory name in front (whoops, hit submit too quick). View_TestLight.js.txt

components_TestLight.js.txt

Solution

We could use a simple example showing how to implement native Views, or even something derived from Mesh.

Additional Information

Doc example, current on web site

[jgwinner]

So, I thought maybe the vr/views/testlight.js should be in client.js, so removed that file and pasted that in to client.js.

I now get this error:

__fbBatchedBridgeConfig is not set, cannot invoke native modules  ExceptionsManager.js:65:4
Failed to print error:  Requiring module "NativeModules", which threw an exception: Invariant Violation: __fbBatchedBridgeConfig is not set, cannot invoke native modules  InitializeCore.js:114:6
TypeError: asm.js type error: Disabled by debugger  client.bundle
Error: __fbBatchedBridgeConfig is not set, cannot invoke native modules  invariant.js:44:14
ReferenceError: ReactVR is not defined[Learn More]  vr:12:7

Somehow, the samples in the documentation should work. For some reason, I can't quite figure what I'm doing here even after looking at say the AmbientLight implementation.

Can someone help me?

It's the last sample I need for the book, the publisher wanted NativeViews documented.

[jgwinner]

The book is shipping without Native Views!

[larrylin28]

Does the packager(the one runs with 'npm start') report any error? From your log, it's more like some error happens in your own code that break the initialization of ReactVR. Reading your code, why are you importing TestLight.js in RCTTestLight.js? It's not used anywhere, and importing a react side code in client side may cause issues

[jgwinner]

Thanks for taking a look!

It's code from the documentation, not mine. I put them in source files as best seemed correct. The documentation is notoriously vague in these examples.

Regarding the import, that looks like my goof - not sure why I did that. Box, for example, does import import RCTBaseMesh from './BaseMesh'; my original code was creating a new Torus, so maybe that was a hold over. Anyway, who cares, it's wrong and it's gone. Thanks for the catch.

However, removing that doesn't help either:

TypeError: view is undefined  UIManager.js:220:6

UIManager/<                   UIManager.js:220:6
forEach                       self-hosted:271:13 
UIManager                     UIManager.js:219:4
ReactNativeContext            ReactNativeContext.js:176:21
createRootView                createRootView.js:100:13
VRInstance                    VRInstance.js:141:20
init                          client.js:10:13
<anonymous>                   http://localhost:8081/vr/:12:7

No errors in the console (npm start).

React packager ready.

Loading dependency graph, done.
Bundling `vr\client.js`  [development, non-minified, hmr disabled]  100.0% (132/132), done.
Bundling `vr\client.js`  [development, non-minified, hmr disabled]  100.0% (121/121), done.

(before/after the import).

[jgwinner]

If I remove this line:

customViews: [{name: 'TestLight', view: RCTTestLight}],from client.js, it does load.

So, the custom view is generating the above error. It's all from here:

https://facebook.github.io/react-vr/docs/native-modules.html

[bodo22]

For the View_Testlight.js try importing OVRUI, THREE and merge: import * as OVRUI from 'ovrui'; import * as THREE from 'three'; import merge from 'react-vr-web/js/Utils/merge';

For the components_TestLight.js try importing the following: import PropTypes from 'prop-types'; import NativeMethodsMixin from 'NativeMethodsMixin'; import StyleSheetPropType from 'StyleSheetPropType'; import LayoutAndTransformPropTypes from 'LayoutAndTransformPropTypes'; import ReactNativeViewAttributes from 'ReactNativeViewAttributes'; import requireNativeComponent from 'requireNativeComponent'; import View from 'View';

[jgwinner]

Same thing :(

I did try similar includes before, basically cribbing from say PointLight.js, which is why I had the extra import of TestLight that @larrylin28 properly noticed I had. I was throwing stuff at the wall :)

Oh, this is interesting. If I go to PointLight.js and track down what it is requiring, I find comments in this file:

createReactNativeComponentClass

module.exports =
  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.createReactNativeComponentClass;

Oh No!

I really don't want to monkey around where I don't need to - I can just paste in native code into client.js if needed and use the bridge.

My point is, if the Docs tell you how to create a native View, then you should be able to create a Native view they way they mention; OR they should point you to say React documentation that does.

It would be neat to come up with new React VR keywords.

[bodo22]

I share your view that the documentation is lacking quite some information on creating custom native views. Are you exporting the native View_Testlight.js?

[jgwinner]

WHOOT. That was it. Funny, I looked at that line over and over and I didn't notice.

THANK YOU.

The imports were necessary too.

[jgwinner]

I spoke too soon, the above didn't include it in index.vr.js. If I do so, I get another error:

TestLight is not defined

[mikearmstrong001]

I was not sure if you resolved your issues but I'm hoping this helps

There are some changes we need to make to the documentation to account for the newer React Native and we should also drop this in as a sample

NativeView.zip

[jgwinner]

Thank you, I'll take a look. I had to ship the book "Getting started with React VR" without the Native Views. Went to printing today!

I could update the books samples hopefully.

Thanks for your help with everything, by the way, including a few JavaScript dumb questions :)