title: How to create events using React Native
body: <p>I'm making an application using <a href="https://facebook.github.io/react-vr/" rel="nofollow noreferrer">React VR</a>. <em>If you don't know React VR, well it's based on React Native with some other components, includes Three.js and other stuff, specific for using WebVR.</em></p>
  
  <p>I've making a component named <code>NavigateButton</code>. Below is my code:</p>
  
  <pre class="lang-babel prettyprint-override"><code>import React from 'react';
  import { AppRegistry, asset, StyleSheet, Pano, Text, View, VrButton, Sphere } from 'react-vr';
  
  export class NavigateButton extends React.Component {
  
      render() {
          return (
              &lt;VrButton onClick={() =&gt; this.onNavigating()}&gt;
                  &lt;Sphere radius={0.5} widthSegments={10} heightSegments={10} style={{ color: "red" }} /&gt;
              &lt;/VrButton&gt;
          );
      }
  
      onNavigating() { // This method must throw an event
          console.log(this.props.to); 
      }
  };
  </code></pre>
  
  <p>If the user clicks on the <code>VrButton</code> <em>(this is like a HTML 5 <code>button</code>-tag but for VR with inside it, a sphere)</em>, an event must been raised to the place where I call the <code>NavigateButton</code> component. That's on code below:</p>
  
  <pre class="lang-babel prettyprint-override"><code>import React from 'react';
  import { AppRegistry, asset, StyleSheet, Pano, Text, View, VrButton, Sphere } from 'react-vr';
  import { NavigateButton } from './components/nativateButton.js';
  
  let room = asset('360 LR/inkom_hal.jpg');
  
  export default class MainComp extends React.Component {
      render() {
          return (
              &lt;View&gt;
                  &lt;Pano source={asset('360 LR/inkom_hal.jpg')} /&gt;
                  &lt;View style={{ transform: [{ translate: [20, 0, 0] }] }}&gt;
                      &lt;NavigateButton to="garage"&gt;&lt;/NavigateButton&gt; 
                      &lt;!-- and must been catch here --&gt;
                  &lt;/View&gt;
                  &lt;View style={{ transform: [{ translate: [-7, 0, -20] }] }}&gt;
                      &lt;NavigateButton to="woonkamer"&gt;&lt;/NavigateButton&gt;
                      &lt;!-- or here --&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          );
      }
  }
  
  AppRegistry.registerComponent('MainComp', () =&gt; MainComp);
  </code></pre>
  
  <p>Is it possible to do that? I would something like code below to catch the event:</p>
  
  <pre class="lang-babel prettyprint-override"><code>&lt;NavigateButton to="woonkamer" onNavigate={() =&gt; this.change()}&gt;&lt;/NavigateButton&gt;
  </code></pre>
  
  <p>I've searched on the internet but nothing found that could help me.</p>