title: react-navigation modal with header/back button
body: <p>Implementing a social network, I have the Feed screen, a Post screen and a Compose screen</p>
  
  <p>I need to be able to navigate back and forth on the Feed and Post pages, so they're in the same stack.</p>
  
  <p>The Compose screen needs to be popped up as a model with a separate navbar.</p>
  
  <p>The current implementation is this:</p>
  
  <pre><code>const MainStack = new StackNavigator({
      Feed: { screen: Feed },
      Post: { screen: Post },
  });
  </code></pre>
  
  <p>I tried two alternatives:</p>
  
  <p>Adding the compose screen to the main navigator
  => there's no header, even when overriding navigation options:</p>
  
  <pre><code>export const Navigation = StackNavigator(
    {
      MainStack: { screen: MainStack },
      Compose: { screen: Compose, navigationOptions: { headerMode: "screen" } },
    },
    { headerMode: "none", mode: "modal" }
  );
  </code></pre>
  
  <p>Placing Compose screen in a separate stack => we get a header with a back button, but pressing it doesn't go back to the main stack</p>
  
  <pre><code>const ComposeStack = new StackNavigator({
      Compose: { screen: Compose },    
  });
  
  export const Navigation = StackNavigator(
    {
      MainStack: { screen: MainStack },
      ComposeStack: { screen: ComposeStack },
    },
    { headerMode: "none", mode: "modal" }
  );
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>