title: React Navigation default background color
body: <p>I'm using <a href="https://github.com/react-navigation/react-navigation" rel="noreferrer">react-navigation</a> and stack-navigator to manage my screens.</p>
  
  <p>Platforms I'm using:</p>
  
  <ul>
  <li>Android</li>
  <li>React Native: 0.47.1</li>
  <li>React Navigation: 1.0.0-beta.11</li>
  <li>Emulator and Device</li>
  </ul>
  
  <p>I have a screen, <strong><em>which acts as a modal form</em></strong> but it is really a full screen. Why is it important the part of <strong><em>"acts as a modal form"</em></strong>? That's because it is kind of modal menu with some options and <strong>WITH A TRANSPARENT BACKGROUND COLOR</strong>. </p>
  
  <h2>This is what I expect:</h2>
  
  <p><a href="https://i.stack.imgur.com/WAz6q.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WAz6q.png" alt="enter image description here"></a></p>
  
  <h2>But what I'm getting is this:</h2>
  
  <p><a href="https://i.stack.imgur.com/YqW0Z.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YqW0Z.png" alt="enter image description here"></a></p>
  
  <p>As you can see, in the second example the background color is completely replaced or the components previously loaded is unmounted so the effect I want to acchieve is lost.
  <strong><em>The idea is to be able to navigate to this screen like any other screen.</em></strong></p>
  
  <p><strong>If it is not posible to accomplish using react-navigation, what other way can I take to do so?</strong></p>
  
  <p>This component executes actions (redux) since is a cross app component and encapsulates lot of mechanisms and logic inside, that's why I can't use it as a <code>PureComponent</code> relaying on the component which makes use of this one. At least, making this Component as PureComponent would force me to replicate many mechanisms and logic in many other components.</p>
  
  <p>For the sake of the question, and to avoid making the question enormous, both screens have exactly the same style, but the one pushed through <code>StackNavigation</code> replaces the <code>backgroundColor</code>, or unmounts the previus screen.</p>
  
  <p>This is what I've have so far:</p>
  
  <pre><code>//PlaylistSelector.js
  render() {
    //Just a full size empty screen to check and avoid bugs
    //Using red instead of transparent, works
  
    return (
      &lt;View style={{ flex: 1, backgroundColor: 'transparent' }}&gt;
      &lt;/View&gt;
    );
  }
  
  //Navigator.js
  import { StackNavigator } from 'react-navigation';
  
  import Album from './Album'; //This is the screen I expect to keep at the background
  import PlaylistSelector from './PlaylistSelector';
  
  const AppNavigator = StackNavigator(
      {
          ...moreScreens,
          Album: { screen: Album },
          PlaylistSelector: {
              screen: PlaylistSelector,
              navigationOptions: {
                  style: { backgroundColor: 'red' } //Does not work, red is just to ilustrate, should be transparent,
                  cardStyle: { //Does not work,
                      backgroundColor: 'transparent',
                  },
                  bodyStyle: { //Does not work,
                      backgroundColor: 'transparent',
                  },
              }
          }
      },
      {
          initialRouteName: 'Splash',
          headerMode: 'none',
          cardStyle: { //Does not work
              backgroundColor: 'transparent',
          },
          transitionConfig: (): Object =&gt; ({ //Does not work
              containerStyle: {
                  backgroundColor: 'transparent',
              },
          }),
      }
  );
  
  export default AppNavigator;
  </code></pre>