title: How to give a transparent background to a fullScreen modal in react navigation (3.x)?
body: <p>How to give a transparent background to a fullScreen modal in react navigation (3.x).The solution given <a href="https://stackoverflow.com/questions/48992961/react-navigation-modal-height">here</a> is not working in new version of react-navigation.
  I want a transparent color in a new fullscreen modal which is presented over another screen.</p>
  
  <pre><code>  const MainNavigator = createStackNavigator(
    {
      BrowserHome: { screen: BrowserHome },
      ImageDetailModal: {
        screen: ImageDetail,
        navigationOptions: {
          header: null
        }
      }
    },
    {
      mode: "modal",
      cardStyle: {
        backgroundColor: "transparent",
        opacity: 1
      }
    }
  );
  
  const AppContainer = createAppContainer(MainNavigator);
  
  export default AppContainer;
  </code></pre>
  
  <p>While my Image detail component which is presented over 'BrowserHome' component is: </p>
  
  <pre><code>export default class ImageDetail extends React.Component {
    render() {
      const modalColor = this.props.navigation.getParam("modalColor");
      return (
        &lt;View
          style={{ flex: 1, flexDirection: "column", justifyContent: "flex-end" }}
        &gt;
          &lt;View
            style={{
              height: "50%",
              width: "100%",
              backgroundColor: "red",
              justifyContent: "center"
            }}
          &gt;
            &lt;Text&gt;Testing a modal with transparent background&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>