Cannot read property 'openOverlay' of undefined from NativeModules using ReactVr

Question

I'm building a project using reactVr and facing an issue while using DOM elements in it. I followed the example from DomoverlaySample from facebook's github and ended up with a problem. Basically, in my index.vr.js I called the Monitor.js, which I want to render as 2D image.

import Monitor from './Monitor';

export default class Basics extends Component {
  render() {
    return (
      <View>
        <Pano source={asset('office.jpg')}/>
        <Monitor />
        <Printer />
        <TryIframe />
      </View>
    );
  }
}

And in my Monitor.js, I copied and paste the code.

import React from 'react'
import {
    Image,
    View,
    asset,
    NativeModules,
    VrButton,
    Text,
    Model,
    VrHeadModel,
    StyleSheet
} from 'react-vr'

import TextboxVr from './TextboxVr'; //calling from parent directory;

const domTextboxContent = {
  header: "Test Header",
  description: "The description goes here with. test description"
}

const vrTextboxContent = "DOM elements couldn't be loaded because your browser doesn't support DOM elements. ";

export default class Monitor extends React.Component {
  constructor(){
    super()

    this.state = {
      renderVrTextbox: false,

      //infoText: false //setting the textField as false which will not display the box
    }
    this._toggleDisplay = this.toggleDisplay.bind(this);
  }

  toggleDisplay() {
      if (VrHeadModel.inVR()) {
        this.setState({renderVrTextbox: !this.state.renderVrTextbox});
      } else {
        // Not in VR, so let's use the dom overlay!
        NativeModules.DomOverlayModule.openOverlay(domTextboxContent);
      }
    }

  render() {
    return (
      <View >
          <View style={styles.triggerContainer}>
            <VrButton onClick={this._toggleDisplay}>
            <Image
              source={asset('infoButton.png')}
              style={styles.imageView}></Image>
              </VrButton>
          </View>
            {this.state.renderVrTextbox && <TextboxVr text={vrTextboxContent} />}
      </View>
    )
  }
}
//.. some styleSheet goes here .. //  

module.exports = Monitor;

Whenever I tried to run the code it throws me an error of that openOverlay() is not defined whereas openOverlay() is defined in DomOverlayModule.js. I am assuming that NativeModule is not working in Monitor.js and I'm not able to solve the issue. Any help is greatly appreciated.

check available functions in `NativeModules.DomOverlayModule` by consoling — Amruth, Aug 27 '18 at 14:20
I actually thought that could solve the problem but DomOverlayModule is a JS file and it is the main root folder. I cannot get the idea of how NativeModules is working. I tried questioning in discordapp.com and no one has an idea about it. — karma gyatso, Aug 27 '18 at 14:40
It is no longer a problem anymore. It was fixed. So basically I had to link the JS files in client.js. — karma gyatso, Aug 28 '18 at 18:13

score 0 · Answer 1 · answered Sep 01 '18 at 03:22

I am posting my own answer here. I was missing a bridge from client.js to DomOverlayModule.js so I added this nativeModules: [domOverlayModule] in client.js, which is available in this link. I was able to use the class TextBoxOverlay.js over and over again. Below is the code:

const vr = new VRInstance(bundle, 'Basics', parent, {
// Add custom options here
...options,
// Register dom overlay module upon initialization.
nativeModules: [domOverlayModule],
 });

Cannot read property 'openOverlay' of undefined from NativeModules using ReactVr

1 Answers1