title: Add an overlay to a react-navigation navigator
body: <p>I'm trying to add an overlay (e.g. to display error popups/toasters/debug buttons etc) to a <a href="http://reactnavigation.org" rel="noreferrer">react-navigation</a> navigator.</p>
  
  <p>However I have a problem:</p>
  
  <p>When I put the react navigator <strong>in a view</strong>, with the overlay on top, the react navigator either doesn't appear or is distorted in some way. </p>
  
  <pre><code>import React, { Component } from 'react';
  import { Text, View } from 'react-native';
  import { StackNavigator } from 'react-navigation';
  
  class HomeScreen extends React.Component {
    static navigationOptions = {
     title: 'Welcome',
    };
    render() {
      return &lt;Text&gt;Hello, Navigation!&lt;/Text&gt;;
    }
  }
  
  const SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
  });
  
  class SimpleAppWithOverlay extends React.Component {
    render() { 
      return( 
        &lt;View&gt;
          &lt;View style={{position: "absolute", backgroundColor:"transparent", margin:30}}&gt;
             &lt;Text&gt;Some Overlay&lt;/Text&gt;
          &lt;/View&gt;
          &lt;SimpleApp/&gt; 
        &lt;/View&gt;);
    }
  } 
  </code></pre>
  
  <p>Here are two snippets showing what I mean in a live editor:</p>
  
  <ul>
  <li>Basic react navigation setup: <a href="https://snack.expo.io/ryI4oCvQW" rel="noreferrer">https://snack.expo.io/ryI4oCvQW</a> </li>
  <li>Same, but with an overlay attempt: <a href="https://snack.expo.io/HkSgoCDX-" rel="noreferrer">https://snack.expo.io/HkSgoCDX-</a></li>
  </ul>
  
  <p>You can see in the second example, the overlay appears but the underlying app is just not visible. </p>
  
  <p>Can this work? How?</p>