title: React navigation make transparent screen inside other StackNavigator
body: <p>I have problem with transparent screen inside other StackNagigation.
  <a href="https://snack.expo.io/@sinhpn92/stacknavigator-issues" rel="nofollow noreferrer">demo</a></p>
  
  <p>I want to show <code>ScreenThree</code> overlay in the front of <code>ScreenTwo</code> after click <code>Go to ScreenThree</code> button in ScreenTwo.</p>
  
  <p>I have set <code>cardStyle</code> with <code>backgroundColor: 'transparent'</code> but it still doesn't working. </p>
  
  <p>I dont know what's wrong here? Have anyone please help me?</p>
  
  <pre><code>import { StackNavigator } from 'react-navigation'; // 2.2.5
  
  
  import React from 'react'
  import { Image, View, Text, Button } from 'react-native'
  import { StyleSheet, Dimensions, TouchableOpacity } from 'react-native'
  
  export default class App extends React.Component {
    render() {
      return (
        &lt;View style={{flex: 1, backgroundColor: 'red'}}&gt;
          &lt;Root/&gt;
        &lt;/View&gt;
      )
    }
  }
  
  class HomeScreen extends React.Component {
  
    render() {
  
      return (
        &lt;View style={{
          backgroundColor: 'blue', 
          flex: 1, 
          justifyContent: 'center', 
          alignItems: 'center',
          paddingTop: 20
        }}&gt;
  
        &lt;TouchableOpacity onPress={
          () =&gt; { 
          this.props.navigation.navigate('ScreenTwo')}
        } 
        style={{
          padding: 16, 
          backgroundColor: 'gray'
        }}&gt;
          &lt;Text&gt;
            Go to ScreenTwo
          &lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
        )
    }
  }
  
  class ScreenTwo extends React.Component {
  
    render() {
  
      return (
        &lt;View style={{
          flex: 1, 
          justifyContent: 'center', 
          alignItems: 'center'
        }}&gt;
          &lt;Text style={{color: 'white'}}&gt;
            ScreenTwo
          &lt;/Text&gt;
          &lt;TouchableOpacity onPress={
          () =&gt; { 
          this.props.navigation.navigate('ScreenThree')}
        } 
        style={{
          padding: 16, 
          backgroundColor: 'gray',
          marginTop: 16
        }}&gt;
          &lt;Text&gt;
            Go to ScreenThree
          &lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
  
        &lt;/View&gt;
        )
    }
  }
  
  class ScreenThree extends React.Component {
  
    render() {
  
      return (
        &lt;View style={{
          backgroundColor: 'rgba(0,0,0,0.3)', 
          flex: 1, 
          justifyContent: 'center', 
          alignItems: 'center'
        }}&gt;
          &lt;Text style={{color: 'white'}}&gt;
            ScreenThree
          &lt;/Text&gt;
  
        &lt;/View&gt;
        )
    }
  }
  
  const DetailStack = StackNavigator({
    ScreenThree: {screen: ScreenThree}
  }, {
    mode: 'modal',
      headerMode: 'none',
      cardStyle: {
        backgroundColor: 'transparent',
        shadowColor: 'transparent'
      },
  })
  
  const MainStack = StackNavigator({
    HomeScreen: {screen: HomeScreen},
    ScreenTwo: {screen: ScreenTwo},
  DetailStack: {screen: DetailStack}
  },
  {
    headerMode: 'none',
    cardStyle: {shadowColor: 'transparent'},
  })
  
  const Root = StackNavigator({
    Main: {screen: MainStack}
  },
  {
      mode: 'modal',
      headerMode: 'none',
      cardStyle: {
        shadowColor: 'transparent'
  
      },
  })
  </code></pre>