title: Cannot read property 'openOverlay' of undefined from NativeModules using ReactVr
body: <p>I'm building a project using <strong>reactVr</strong> and facing an issue while using DOM elements in it. I followed the example from <a href="https://github.com/facebook/react-360/tree/master/Examples/DomOverlaySample" rel="nofollow noreferrer">DomoverlaySample</a> 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 <strong>2D</strong> image. </p>
  
  <pre><code>import Monitor from './Monitor';
  
  export default class Basics extends Component {
    render() {
      return (
        &lt;View&gt;
          &lt;Pano source={asset('office.jpg')}/&gt;
          &lt;Monitor /&gt;
          &lt;Printer /&gt;
          &lt;TryIframe /&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>And in my <em>Monitor.js</em>, I copied and paste the code. </p>
  
  <pre><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 (
        &lt;View &gt;
            &lt;View style={styles.triggerContainer}&gt;
              &lt;VrButton onClick={this._toggleDisplay}&gt;
              &lt;Image
                source={asset('infoButton.png')}
                style={styles.imageView}&gt;&lt;/Image&gt;
                &lt;/VrButton&gt;
            &lt;/View&gt;
              {this.state.renderVrTextbox &amp;&amp; &lt;TextboxVr text={vrTextboxContent} /&gt;}
        &lt;/View&gt;
      )
    }
  }
  //.. some styleSheet goes here .. //  
  
  module.exports = Monitor;
  </code></pre>
  
  <p>Whenever I tried to run the code it throws me an error of that <a href="https://github.com/facebook/react-360/blob/master/Examples/DomOverlaySample/DomOverlayModule.js" rel="nofollow noreferrer"><code>openOverlay()</code></a> is not defined whereas <code>openOverlay()</code> is defined in <code>DomOverlayModule.js</code>. I am assuming that NativeModule is not working in <em>Monitor.js</em> and I'm not able to solve the issue. Any help is greatly appreciated. </p>