title: Implementation detail worries - Calling navigate on nested Navigator
body: <p>In summary - my question is, is there an alternative way to acheive this sidebar tabs, possibly/hopefully with TabNavigator? Or is my approach below not a implemenation detail and future-proof?</p>
  
  <p>I am trying to create a tab navigator with tabs on side. I could not pull this off with <code>TabNavigator</code> so I I nested a <code>StackNavigator</code> with the following structure:</p>
  
  <pre><code>class PageShowroom extends React.Component {
      childnav = {}
      navRef = el =&gt; this.childnav.navigate = el &amp;&amp; el._navigation.navigate
      navigateChild(...args) {
          this.childnav.navigate(...args);
      }
      render() {
          return (
              &lt;View style={{flexDirection:'row'}}&gt;
                  &lt;View&gt;
                      &lt;Button onPress={this.navigateChild('blah')} title="Blah" /&gt;
                  &lt;/View&gt;
                  &lt;ShowroomNavigator ref={this.navRef}/&gt;
              &lt;/View&gt;
          )
      }
  }
  
  const ShowroomNavigator = StackNavigator(
      { catalog: {screen:ScreenCatalog}, orders:{screen:ScreenOrders}},
      { initialRouteName: 'catalog', headerMode: 'none' }
  );
  </code></pre>
  
  <p>I don't like it, but it works. Here is a screencast - <a href="https://youtu.be/r33WvOnb6jU" rel="nofollow noreferrer">https://youtu.be/r33WvOnb6jU</a></p>
  
  <p>The stuff I don't like is:</p>
  
  <ol>
  <li>There is a drop shadow around <code>ShowroomNavigator</code> which is a <code>StackNavigator</code>. I had to hide this drop shadow by doing z-index tricks and wrapping (code not shown above)</li>
  <li>Sliding the nested router from the left edge does not go back.</li>
  <li>The third problem, and the major problem, is I think I am relying on an implementation detail:</li>
  </ol>
  
  <p>We see I attach a <code>ref</code> to <code>ShowroomNavigator</code>. The <code>ref</code> callback triggers twice, once on mount and once on unmount. On mount <code>el</code> is <code>{props, context, refs, updated, subs, _isStateful, _handleOpenURL, dispatch, state, _reactInternalInstance, _navigate}</code> and on unmount <code>el</code> is <code>null</code>.</p>
  
  <p>So I am tapping into <code>el._navigation.navigate</code>, which I worry might be an implementation detail.</p>
  
  <p>So my question is, is there an alternative way to acheive this sidebar tabs, possibly/hopefully with TabNavigator? Or is my <code>el._navigation</code> approach above not a implementation detail and is future-proof?</p>